Re-setting CSS code for form buttons

Question

I used a CSS reset to reset some commonly-used items. The code is this:

html, body, div, h1, h2, h3, h4, ul, ol, li, form, input, fieldset, textarea {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
}
ul {list-style: none outside none;}
img, fieldset {border: 0;}
h1, h2, h3, h4 {font-weight: normal;}
em {font-style: italic;}
strong {font-weight: bold;}

I know there's YUI and Meyer's reset, but I use this one.

Now, the problem I'm experiencing is that I can't get the submit buttons to look normally again. I could ofcourse remove the input from the list and be done with it, but I'd like to know how to get it back, since I might need that in the future.

Answer 1

It might be a good idea to iterate through the properties you have changed using javascript or even just looking at it through something like firefox to get the right values, then you would be able to set them to the correct defaults.

From memory I think there are quite significant size differences in the default sizes of buttons between IE, FireFox and Safari - I dont really use opera but I assume there are size issues there - so if you were then to set a padding on the button in CSS it might not render correctly any more in Safari and firefox.

Answer 2

input[type="submit"]
{
    background-color: buttonface;
    border: 2px outset buttonface;
    color: buttontext;
}