Remove CSS property completely

Question

I have a button, which when clicked loads an additional CSS file, that overrides a great part of the basic CSS files. (this is for accessibility purposes if you wonder)

Let's say I have a background and background-color properties used in multiple selectors for input[type='text']. I want to reset/delete those. I DON'T want to set a new value for those background properties, I want to remove them, so that the browser will render everyting as it would by default.

The reason for this is because in high contrast mode with black background color to the body in Firefox, any background set to input or button will override it with a value equal to the text color which will make the value of the input or the button unreadable. But that's another story...

EDIT: Since everybody so far is telling me to set some new property to those, I'm writing it in bold big letters - I DON'T NEED TO SET NEW PROPERTY FOR background. :) The reason behind that if that property is present Firefox defaults it to black if the background set in the high contrast mode is black as well. To test this, go to Preferences -> Content -> Colors and check Allow pages to choose their own colors, instead of my selections above. Here's how my options look.

Answer 1

Do a css reset/normalize at the beginning in your first css file. Then at the beginning of the second one do it again. You can leave out the first reset, but this will give you consistent results.

Answer 2

You can remove the original stylesheet. Just assign it an id and use jQuery.remove(...).

---

The alternate solution is to alter the first stylesheet to use some kind of namespace⁺, for example:

/* these are the rules that you want to be removed */
.stylesheet1       { }
.stylesheet1 h1    { }
.stylesheet1 p     { }
.stylesheet1 a     { }
.stylesheet1 input { }
/* these rules can co-exist with the next stylesheet */
nav                { }
article            { }
aside              { }
section            { }

Inside your HTML add the stylesheet1 class to body. When you load the other CSS file (presumably via JavaScript) then you remove this class. All namespaced rules will become ineffective.

^* CSS preprocessors e.g. SASS and LESS make it easier for you to manage these rules.

Answer 3

It sounds like the best solution for you is to have two different CSS classes targeting a single input, and toggle back and forth between the two. There are several ways to do this:

CSS:

input[type="text"].a {...}
input[type="text"].b {...}

Here we have two different classes, a and b. When defining the input initially, set class="a". We'll then swap that with b when the button is clicked. Again, there are several ways of doing this:

jQuery:

$('.a').click(function(){
    $(this).removeClass('a').addClass('b');
});

Plain JS

var button = document.querySelector('.a');
button.addEventListener('click', function(){
    button.classList.remove('a');
    button.classList.add('b');
});

This is the generally preferred method for achieving this kind of behaviour. It adheres strictly to standards, in that it separates logic, markup, and presentation into their respective pieces.

Note: The plain JS method listed above uses some pretty modern native JS code. Take a look at You Might Not Need jQuery to find suggestions for making this functionality cross-browser.

Answer 4

Instead of adding or removing properties to elements, I think the better way to do it is to put these extra properties in a CSS class and then add or remove this extra class to the elements as needed. And if you need override, then use !important. Now it's just about add/removing classes.

Here's an example in jQuery

.MyControl{background: blue;}
.MyControlAccessibility{background: red !important;}

$(SomeControl).click(function () { $(this).addClass('MyControlAccessibility'); }
$(SomeControl).click(function () { $(this).removeClass('MyControlAccessibility'); }

Answer 5

Using a global class on the body is good as mentioned.

Another way could be to put your light and dark "theme"-specific styles into separate stylesheets from the common CSS and then disable the one you do not want. This will avoid conflicts and needing to use !important, and you can keep things clean without having to hack away at various bits of jquery.css().

For example

base.css

a { text-decoration:none; }

dark.css

body { background-color:#000; }
a {color:#fff; font-size:1.2em;}

light.css

a {font-size:1.5em;}

Note that light.css has no properties for background-color etc. so when they switch from dark to light, the defaults will be used again.

To do the switch, you can do something along these lines:

for (var i = 0; i < document.styleSheets.length; i++) {
    var ss = document.styleSheets[i];

    // some browsers store in url, others in href
    if((ss.href || ss.url || '').indexOf('dark.css') > -1) {
        ss.disabled = true;
    }
}

By disabling instead of removing the current one, it should be easier to switch between the two.