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.

Web Page A has chosen not to style "input type=submit.." tags whereas web page B has styled them.

This results in the the bookmarklet displaying differently styled submit buttons based on the underlying page's style.

I want the submit buttons to be styled identically on all web pages in it's default manner

One solution is to set the css style for the submit button within my script so it shows up identically on all pages. (This is what I have done for all other tags).

My question is:

a) How do I set the css style for the submit button so it display's in a 'default manner' or ? b) Can one remove existing styling and if so how for the button so that it displays in the 'default manner'.

In other words, How can I have the submit buttons within the ui of my bookmarklet be displayed in the 'default manner' regardless of whether the underlying web page has chosen to style it or not.

Note: By 'default manner' I mean the way the submit button is displayed when no styling is added to it. For example the 'Google search' or 'Im feeling lucky' buttons on http://www.google.com

Answer 1

Taken from Mozilla Developer Center

Restoring the default property value Because CSS does not provide a "default" keyword, the only way to restore the default value of a property is to explicitly re-declare that property. Thus, particular care should be taken when writing style rules using selectors (e.g., selectors by tag name, such as p) that you may want to override with more specific rules (such as those using id or class selectors), because the original default value cannot be automatically restored. Because of the cascading nature of CSS, it is good practice to define style rules as specifically as possible to prevent styling elements that were not intended to be styled.

The only way you have is to set your own class on the button that is very explicit in its css rules: i.e

background-color:grey !important;

instead of

background:grey;

Answer 2

For Firefox you can find the default form styles by typing resource://gre/res/forms.css into the address bar, which does at least give you the details of the default style for an input button so that you can then copy them and override using a !important rule.

It's not entirely satisfactory though as the default style could of course change with a future version of the browser and the default style for different browsers might be different.

Answer 3

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.

Answer 4

Thanks, used with good results

INPUT, SELECT { color: #003333; font-size: 90%; border-bottom: #d3d3d3 1px solid; border-left: #d3d3d3 1px solid; border-top: #d3d3d3 1px solid; border-right: #d3d3d3 1px solid; }

INPUT[type="submit"] { background-color: #336699; color: #f0e68c; }