1

How do I make the width of HTML input element to be flexible and matching exactly the width of the string value it contains?

okey_on
  • 2,888
  • 8
  • 28
  • 36
  • Float it or change it's `display` property. – George Mar 18 '14 at 12:11
  • This should help you: http://stackoverflow.com/questions/7120066/fluid-input-elements – Milan Stojanovic Mar 18 '14 at 12:15
  • I don't think either of those other comments provide what you're looking for (input width to match its value), but it looks like it's been answered here: http://stackoverflow.com/questions/3392493/adjust-width-of-input-field-to-its-input [for what it's worth, Lyth's answer on that question feels best to me] – Grant Gibson Mar 18 '14 at 13:06

1 Answers1

0

I'm afraid this is not possible with only CSS. But you may find a lot of JS solutions online. An easy - but not so elegant - solution to this is to use a span and use the contenteditable attribute and style it to look like an input:

 <span contentEditable="true">Placeholder</span>

see the reference in MDN

Of course, it won't behave as an input, so you'll also have to do a workaround for this too.

xpy
  • 5,481
  • 3
  • 29
  • 48