使用 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
}

使用 CSS 仅使用部分输入字段

Use just part of the input field with CSS

html

css

input-field