Reverting CSS style of

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 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:

1. How do I set the CSS style for the submit button so it displays in a 'default manner' or ?
2. 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 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

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 5

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;
}

Answer 6

You can use below style to reset button style to default style

.reset-this {
    animation : none;
    animation-delay : 0;
    animation-direction : normal;
    animation-duration : 0;
    animation-fill-mode : none;
    animation-iteration-count : 1;
    animation-name : none;
    animation-play-state : running;
    animation-timing-function : ease;
    backface-visibility : visible;
    background : 0;
    background-attachment : scroll;
    background-clip : border-box;
    background-color : transparent;
    background-image : none;
    background-origin : padding-box;
    background-position : 0 0;
    background-position-x : 0;
    background-position-y : 0;
    background-repeat : repeat;
    background-size : auto auto;
    border : 0;
    border-style : none;
    border-width : medium;
    border-color : inherit;
    border-bottom : 0;
    border-bottom-color : inherit;
    border-bottom-left-radius : 0;
    border-bottom-right-radius : 0;
    border-bottom-style : none;
    border-bottom-width : medium;
    border-collapse : separate;
    border-image : none;
    border-left : 0;
    border-left-color : inherit;
    border-left-style : none;
    border-left-width : medium;
    border-radius : 0;
    border-right : 0;
    border-right-color : inherit;
    border-right-style : none;
    border-right-width : medium;
    border-spacing : 0;
    border-top : 0;
    border-top-color : inherit;
    border-top-left-radius : 0;
    border-top-right-radius : 0;
    border-top-style : none;
    border-top-width : medium;
    bottom : auto;
    box-shadow : none;
    box-sizing : content-box;
    caption-side : top;
    clear : none;
    clip : auto;
    color : inherit;
    columns : auto;
    column-count : auto;
    column-fill : balance;
    column-gap : normal;
    column-rule : medium none currentColor;
    column-rule-color : currentColor;
    column-rule-style : none;
    column-rule-width : none;
    column-span : 1;
    column-width : auto;
    content : normal;
    counter-increment : none;
    counter-reset : none;
    cursor : auto;
    direction : ltr;
    display : inline;
    empty-cells : show;
    float : none;
    font : normal;
    font-family : inherit;
    font-size : medium;
    font-style : normal;
    font-variant : normal;
    font-weight : normal;
    height : auto;
    hyphens : none;
    left : auto;
    letter-spacing : normal;
    line-height : normal;
    list-style : none;
    list-style-image : none;
    list-style-position : outside;
    list-style-type : disc;
    margin : 0;
    margin-bottom : 0;
    margin-left : 0;
    margin-right : 0;
    margin-top : 0;
    max-height : none;
    max-width : none;
    min-height : 0;
    min-width : 0;
    opacity : 1;
    orphans : 0;
    outline : 0;
    outline-color : invert;
    outline-style : none;
    outline-width : medium;
    overflow : visible;
    overflow-x : visible;
    overflow-y : visible;
    padding : 0;
    padding-bottom : 0;
    padding-left : 0;
    padding-right : 0;
    padding-top : 0;
    page-break-after : auto;
    page-break-before : auto;
    page-break-inside : auto;
    perspective : none;
    perspective-origin : 50% 50%;
    position : static;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes : '\201C' '\201D' '\2018' '\2019';
    right : auto;
    tab-size : 8;
    table-layout : auto;
    text-align : inherit;
    text-align-last : auto;
    text-decoration : none;
    text-decoration-color : inherit;
    text-decoration-line : none;
    text-decoration-style : solid;
    text-indent : 0;
    text-shadow : none;
    text-transform : none;
    top : auto;
    transform : none;
    transform-style : flat;
    transition : none;
    transition-delay : 0s;
    transition-duration : 0s;
    transition-property : none;
    transition-timing-function : ease;
    unicode-bidi : normal;
    vertical-align : baseline;
    visibility : visible;
    white-space : normal;
    widows : 0;
    width : auto;
    word-spacing : normal;
    z-index : auto;
}

Reference link - GitHub

Above is the solution to your problem but i don't think css reset is something feasible unless we end up in such situation, so try to avoid this kind of situations.

I hope this will help you.

Thanks

Answer 7

What i've done and it seems to work in all browsers is...

$(buttonID).css({
'background-color':''
});

by just leaving the background-color empty it seems to revert the button to its default state.

Answer 8

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 9

I came up with the same problem. This posts helped me a lot. I had to assign that CSS rule to text inputs in a special table but not to all of the text inputs in the page. So I had to used the CSS rule with id of the table. This should work fine with form ids.

'#addForum note' is the id of the special formatted table.

#addForumNote input[type="text"], label, textarea{
  width: 425px;
  background-color: #ccc;
  border-style: solid;
  border: 1px;
  border-color: #7a7b7a;
}

Hope this may help someone. Thanks.

Answer 10

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.