Используйте только часть поля ввода с CSS

Question

У меня есть поле ввода, а внутри него справа есть строка, которая отображает информацию пользователю.

<div class="my_div_class"> 
    <input class="my_input_class" type="text" placeholder="Search"> 
    <span class="my_span_class">6000 available</span> 
</div> 

Используя положение относительно и абсолютное, я помещаю пролет внутри поля ввода.

Однако, если пользователь вводит длинный запрос, текст будет находиться под текстом диапазона.

Есть ли способ заставить поле ввода выполнять горизонтальную прокрутку, когда пользователь достигает точки перед правым краем, в идеале без использования javascript?

Answer 1

Вы можете добавить padding-right в поле ввода.

.my_div_class { 
 
    position: relative; 
 
    width: 200px; 
 
} 
 
.my_input_class { 
 
    width: 100%; 
 
    padding-right: 100px; 
 
    box-sizing: border-box; 
 
} 
 
.my_span_class { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
}

<div class="my_div_class"> 
 
    <input class="my_input_class" type="text" placeholder="Search"> 
 
    <span class="my_span_class">6000 available</span> 
 
</div>

Answer 2

.my_input_class { 
    padding-right: 1em; // Replace `1em` with the desired amount of padding 
}