CSS: Reset INPUT Element to Original Width

Question

I don't think this is possible but I am going to ask it nonetheless, lets say 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 480px, this works fine for most of my needs but in some specific cases it doesn't, for instance:

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

This will make the browser render each input with a width of 500px (jsFiddle)...

Is there anyway to force the browser to rollback to the default style?

Answer 1

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

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

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

Answer 2

Just override it with an !important selector:

input {
    width: auto !important;
}

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