Use just part of the input field with CSS

Question

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.

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?

Stickers · Accepted Answer · 2017-01-19 15:06:36Z

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>

answered Jan 19, 2017 at 15:06

Stickers

79.1k24 gold badges157 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bruno Over a year ago

Thanks! In my example I had to add a combination of width and padding-right. Just by adding padding-right, the input field was simply growing to the right and the issue was still there.

Stickers Over a year ago

@Bruno I also used box-sizing: border-box; in the example, so padding and borders will be part of the total width and height, that might help.

fvgs · Accepted Answer · 2017-01-19 15:07:44Z

1

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

answered Jan 19, 2017 at 15:07

fvgs

22.1k9 gold badges37 silver badges49 bronze badges

Collectives™ on Stack Overflow

Use just part of the input field with CSS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related