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/

Answer 3

width: auto;

Is this what you're after?

Basically I've set width:auto; to all inputs that define size attribute. Maybe this isn't the correct attribute but it shows how you can distinguish inputs between each other.

But basically you haven't told us what you'd like with these three inputs. Would you want them to occupy the whole width but should be 2:2:4 in size or is it just auto with as it seems we all did...