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

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

只需在输入[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>