Remove CSS property completely

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.

---

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 eg SASS and LESS make it easier for you to manage these rules.

---

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.

---

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.

链接地址: http://www.djcxy.com/p/94884.html

上一篇: 当使用退格或删除按钮提交按钮颜色不变时

下一篇: 彻底删除CSS属性