how can I overcome existing css and change button style to the default windows style button?


Tags: css

Problem :

Problem: An existing resource dependency (which I'm not permitted to alter or remove from the build) which contains a stylesheet that dictates an unwanted button style. I want to somehow overcome the influence that this stylesheet has on the button style in my page.

Question: Using my own local stylesheet, how can I revert to the default Windows css button style (background, shape, text)? -I dont know what the css attributes should be, etc. (I assume I would have to use the "!important" phrase, etc.)



Solution :

You won't, and shouldn't, use !important. You just need to properly override following the principles of CSS specificity and inheritance.

Explanation of CSS Inheritance

For example--let's say your 'unwanted' button style is something like this:

<input type="button" class="unwanted" />

And you've got CSS in your (uneditable) style sheet:

.unwanted {
fooRule: whatever;
barRule: whatever;
}

Using inheritance, you just need to write your own external stylesheet. Things to remember:

(1) You should put it below the existing that contains the 'unwanted' stylesheet reference. Inheritance processes external stylesheets sequentially. This follows the 'closest rule wins' principle. (2) The way you write the CSS rule must be MORE specific than the rule that currently applies the unwanted style. Again, the above link really helps explain this.

Going back to our previous example, the unwanted style is being applied simply by a class of 'unwanted'. Your rule can override without editing the HTML. Alternately you can edit the HTML--it's up to you. It also depends on how globally you want to affect button styles.

If you want to globally affect all buttons with 'unwanted' class, you would do:

input[type='button'] .unwanted {
fooRule:override;
}

If you only want to change SOME of the buttons that have a style of unwanted, you would instead do:

.unwanted.newRule {
fooRule:override;
}

And then you would mod your HTML to be:

<input type="button" class="unwanted newRule">

Note that .unwanted.newRule means it will only impact 'elements' with a class of both unwanted and newRule. It would not change anything if the unwanted style is set up like this:

<form class="unwanted">
    <input type="button" class="newRule" />
</form>

The reason being .unwanted.newRule means 'both classes are on the same element'. You would change it to :

.unwanted .newRule {foo}

So--my point is, there are a ton of semantically correct ways to CORRECTLY utilize CSS specificity and inheritance, and do what you want to do, without having to use !important.

On a side note, the only reason you'd have to use !important is if the css styling the button is actually being applied using javascript that writes 'style' attributes to the HTML element. If that is the case, (1) don't use that JS, as that is a horrible method for styling using JS, (2) you will have to use !important to override the inline style being applied by the JS. Again, this is because of how cascading works--in this case, CSS is applied by (1) browser (user agent), (2) external css, (3) internal 'head' css, (4) internal inline css, (5) author !important declarations, (6) user !important declarations.


    CSS Howto..

    Show/Hide & Change CSS functions are not working

    how to edit input type data with CSS [duplicate]

    How to fix width of tooltip at IE8

    How to lay down elements vertically from top to bottom, and then from right to left, using a clean HTML markup?

    How can I setup Javascript dynamically to expand divs when clicking another div?

    CSS: Double-Border, how to [duplicate]

    How to use this CSS rule for divs? [JSFiddle]

    How can I vertically align the text in an anchor tag?

    In CSS how do I affect links of only 1 class

    How to override external css marked as !important? [closed]

    how to make form input in middle

    How to make a DIV section clickable?

    How can I prevent my button from being mangled?

    How to align both these elements in same line?

    How can I get .less compiler support in Visual Studio 2012 Release 2?

    How To Place Buttons Around A Circle with HTML5 and CSS 3?

    How to find the highest z-index using jQuery

    How to use an existing source map to compile scss to css?

    How to activate a CSS animation only when hovering - without javascript

    Why does first slideshow image click skip transition and go straight to image?

    How to use multiple CSS locators as a selenium locator?

    How to put a picture on top of other without using Positioning, Divs or Backgrounds?

    How to overlap divs in html

    CSS selector: how to style items [1-2][5-6][9-10] etc by pair

    How to show two rows of div in single div

    how to stop css/jquery rotation

    How to hide navbar when when overlay appears

    How can I tell if a particular CSS property is inherited with jQuery?

    how to zoom the background-image in ie8 with css

    text over horizontal line…How do I make the line gradient?