How to set an input width to match the placeholder text width

css html placeholder
Dan Eastwell picture Dan Eastwell · Jun 25, 2013 · Viewed 29.6k times · Source

Example http://dabblet.com/gist/5859946

If you have a long placeholder, the input by default does not display wide enough to show all the placeholder text.

e.g.

<input placeholder="Please enter your name, address and shoe size">

Without setting a fixed width, and preferably no javascript, can you set the input to show all the placeholder text?

Answer

Avner Solomon picture Avner Solomon · Jun 25, 2013

This can be done only via javascript by setting the size = placeholder length:

input.setAttribute('size',input.getAttribute('placeholder').length);

Here is a code that dose that for all the inputs: http://jsfiddle.net/KU5kN/

Related questions

Change an HTML5 input's placeholder color with CSS

Chrome supports the placeholder attribute on input[type=text] elements (others probably do too). But the following CSS doesn't do anything to the placeholder's value: Value will still remain grey instead of red. Is there a way to change the …

Read More
How do I make a placeholder for a 'select' box?

I'm using placeholders for text inputs which is working out just fine. But I'd like to use a placeholder for my selectboxes as well. Of course I can just use this code: <select> <option value="">Select …

Read More
How do I auto-hide placeholder text upon focus using css or jquery?

This is done automatically for every browser except Chrome. I'm guessing I have to specifically target Chrome. Any solutions? If not with CSS, then with jQuery? Kind regards.

Read More