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

I have an input field, and inside it on the right side there is a string that displays information to the user.

我有一个输入字段，在右侧有一个字符串，向用户显示信息。

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

Using position relative and absolute, I places the span inside the input field.

使用position relative和absolute，我将span放在输入字段中。

However, if the user types a long query, the text will be under the span text.

但是，如果用户键入长查询，则文本将位于范围文本下。

Is there a way to force the input field to do the horizontal scroll when the user reaches a point before the right margin, ideally without using javascript?

有没有办法强制输入字段在用户到达右边距之前的点时进行水平滚动，理想情况下不使用javascript？

2 个解决方案

#1

You can add some padding-right to the input box.

您可以在输入框中添加一些填充权限。

.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>

2 个解决方案

#1

更多相关文章

随机推荐