CODEWITHSUNDEEP
htmlcssbutton
wortwart
wortwart

Reputation: 3360

How can I restore button default styles?

I'd like to reset a <button> to browser defaults in the high contrast mode of our website. Simply removing the styles is not an option as I would have to change a lot of code.

I thought this would be an easy task by assigning initial to every changed CSS property. Turns out, it doesn't work: while some properties are actually reset, the browser won't apply its original background-color and border and, in the case of Chrome, the text color when the button is disabled.

Is there a way to do this or can I only approximately reconstruct the browser defaults? And what is initial for if not for that?

JSFiddle showcasing the problem.

Upvotes: 1

Views: 741

Answers (2)

Danield
Danield

Reputation: 125601

While some properties are actually resetted, the browser won't apply its original background-color and border

It looks to me like the OP is looking for the revert value functionality.

See the spec regarding revert - one of the CSS-wide property values:

Rolls back the cascaded value to the user level, so that the specified value is calculated as if no author-level rules were specified for this property on this element. ...

Unfortunately, the revert value is currently not well supported.

Caniuse on revert actually nicely summarizes (and also hi lights the difference between revert and initial)

A CSS keyword value that resets a property's value to the default specified by the browser in its UA stylesheet, as if the webpage had not included any CSS. For example, display:revert on a <div> would result in display:block. This is in contrast to the initial value, which is simply defined on a per-property basis, and for display would be inline.

Upvotes: 3

Alvaro Men&#233;ndez
Alvaro Men&#233;ndez

Reputation: 9022

I suppose your html for high contrast mode has a parent with a class... let's say as an example you have the class "highcm" at body

You could change your actual css sheet where you have styled your buttons to something like:

body:not(.highcm) .youractualclass  button {
    color: red;
}

This way just your button with not "highcm" at body will be styled while the rest will be rendered browser defaults

Upvotes: 2

Related Questions