输入框内的文本太靠近边框

Question

我有一个带有渐变边框的输入字段，但里面的文本离它太近了。而且我已经试过了padding-left，但是这样左边的边框变大了，而且文字还是离边框很近

输入框图片：

.inputfield {
    margin-top: 5px;
    -moz-appearance: none;
    outline:0;
    width: 170px;
    height: 40px;
    font-family: 'Montserrat', sans-serif;
    color: white;

    position: relative;
    padding: 5px;

    background-color: rgb(11, 15, 31);
    border: solid 0.5px transparent;
    border-radius: 80px;
    background-image: linear-gradient(rgb(11, 15, 31), rgb(11, 15, 31)), radial-gradient(circle at top 
    left, rgb(76, 133, 242),rgb(144, 104, 235));
    background-origin: border-box;
    background-clip: content-box, border-box;
}

This is what it does when add padding-left

Answer 1

只需将 padding-left 添加到 input[type=text]。

Answer 2

您可以在 input 周围引入包装元素。现有代码中内置的快速示例如下所示：

.input-wrapper {
    width: 170px;
    height: 40px;
    padding: 5px;
    border-radius: 80px;
    background-image: linear-gradient(rgb(11, 15, 31), rgb(11, 15, 31)), radial-gradient(circle at top 
    left, rgb(76, 133, 242),rgb(144, 104, 235));
    background-clip: content-box, border-box;
    display: flex;
    align-items: center;
}

.input-field {
    outline: 0;
    background-color: transparent;
    color: white;
    border: none;
    width: 100%;
    margin: 0 10px;
    font-size: 16px;
}

<div class="input-wrapper">
  <input class="input-field" value="TEXT">  
</div>

输入框内的文本太靠近边框

Text inside inputfield is too close to the border

css

input-field