Reverting CSS style of <input type=submit button to its default style

Question

I\'m using a bookmarklet that inserts a script tag into the current web page.

This script has some UI and an \"input type=submit....\" tag in it.

<

Answer 1

This seems to work beautifully (trust me, try it):

/* Restore Browser's Default Submit Button Style */
input[type=submit] {
    background:ButtonFace; 
    color:ButtonText; 
    border:2px outset ButtonFace;
}
input[type=submit]:active {
    border-style:inset; 
    -webkit-appearance:push-button;
}

Answer 2

The url above to the default styles in firefox no longer works in at least ff14, the new location is:

resource:///chrome/toolkit/res/forms.css

Answer 3

I don't think there is any way to access the calculated style. Javascript (as far as I know) can only set inline styles and assign classes. I wish the DOM style object had access to calculated styles, but sadly is does not.

The best thing I can think of at this point is to simply declare your own css rules to override whatever the host site uses. As long as your css rule is more specific, it will win in the end. This will give your bookmarklet a consistent look and feel across browsers, which might not bee such a bad thing in the end.

Answer 4

You can restrict the CSS styling of INPUT (Submit button is an input type) so it does not affect Submit buttons

So instead of just putting:

input{
blah; blah; blah;
}

You can create a style:

input[type="text"] {
blah blah blah
}

And that will only affect the text input, leaving everything else including submit buttons as default.

JWW's refernce to resource://gre/res/forms.css is helpul. If you look at that you will see how to set a style to affect several different types of input.