Default input item size

Question

The default input element is size = "20" if it is not defined on the line or is assigned a CSS style rule.

How do you make the default actual size of the value? For other items:

<div style="display: inline; width: auto;"> The box will only fit the width of it content </div> 

width: auto is all you need. I can not set a specific width, as the value may be larger. For instance:

 <input id="short" type="text" value="1000" /> <input id="long" type="text" value=" Areally long name is in this input field." /> 

I want #short to be 1000 in size (essentially size = "4" + padding), but #long should be as long as necessary. These inputs come in software, so I can’t just put a short class on the one I need and a long class on the one I want for a long time. I would really like it if I could put:

 input { width: auto; } 

Anyway to do this?

Answer 1

The default input element is size = "20"

This "default size" depends on the browser, version, and your OS. This cannot be done in inline styles.

the best solution is to set the width and fill, so it adds up to 100%

 input { width: 98%; padding: 1%; } 

then set it to absolute left and right 0

 <fieldset> <input type="text" /> </fieldset> 

finally add this css

 <style type="text/css"> fieldset { position: relative; } input { position: absolute; left: 0; right: 0; } </style> 

Answer 2

Assuming you have every input in your line in the form, you can set the size attribute to the desired size, but also add css from:

 input[type="text"] { max-width: 100%; } 

This ensures that the field does not overflow the form. This approach gives a visual signal of how much data is expected for short fields (because they will be the right size), while at the same time putting a cap on long ones.