Reverting CSS style of <input type=submit button to its default style
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 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 its 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:
- How do I set the CSS style for the submit button so it displays in a 'default manner' or ?
- 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 'I'm feeling lucky' buttons on http://www.google.com.
Answer
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;