Текст внутри поля ввода находится слишком близко к границе

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;
}

Это то, что происходит при добавлении отступа влево

Answer 1

Вы можете добавить элемент-обертку вокруг 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>

Answer 2

Просто добавьте отступ слева для ввода [type = text].