Geek Answers Handbook

CSS: Reset INPUT Element to Original Width

I don't think this is possible, but I'm going to ask him, however, let's say that I have the following HTML:

<div style="width: 500px;"> <input class="full" /> </div>

And the corresponding CSS:

 input { width: 100%; } .full { display: inline; float: left; margin: 0 2%; width: 96% }

In this case, my input element will have a width of 480 pixels, this is great for most of my needs, but in some specific cases it is not, for example:

 <div style="width: 500px;"> <input name="day" size="2" /> <input name="month" size="2" /> <input name="year" size="4" /> </div>

This will force the browser to display each input with a width of 500 pixels ( jsFiddle ) ...

Is there a way to make the browser roll back to the default style?

+4
source share
3 answers

Just set width:auto to these inputs. This works with or without the size attribute (respects the size if you set it).

http://jsfiddle.net/Madmartigan/kQDpY/3/

BTW, float will automatically set the display type to block, your inline declaration for the div does nothing, so you don't need it.

+5
source

Just override it with the !important selector:

 input { width: auto !important; }

And the demo: http://jsfiddle.net/kQDpY/4/

+2
source

width: car;

Is this what you are after?

I basically set width:auto; for all inputs that define the size attribute. This may not be the right attribute, but it shows how you can distinguish between inputs.

But basically you did not tell us what you would like with these three inputs. Would you like them to occupy the entire width, but should be 2: 2: 4 in size or is it just a car, because, it seems, we did everything ...

+1
source

More articles:


All Articles