忽略特定控件上的CSS声明

Question

I have a checkbox input control and I have a CSS file which includes the following declaration:

input[type="checkbox"] {
    display:none;
}

I want this CSS to be be applied to any checkbox input element except one. How can I ignore this CSS rule( display:none; ) on one of my controls?

Answer 1

All you need to do is target that specific checkbox and give it a display of initial .

You haven't provided any HTML so I'm going to have to make up a generic example:

 input[type="checkbox"] { display: none; } input[type="checkbox"].bar { display: initial; } 

 <input type="checkbox" class="foo" /> <input type="checkbox" class="bar" /> <input type="checkbox" class="baz" /> 

Answer 2

You can simply do something like:

input[type="checkbox"]:not(.this_one) {
  display: none;
}

Note: Replace this_one with the ID or class of the one you want to exempt(leave out)

See working example here

Answer 3

Just use a class to add this css property (and possibly others) and omit the class for the needed element

input[type="checkbox"].yourClass 
{
    display:none;
}

  <input type="checkbox" name="vehicle" value="Bike" class = "yourClass"> I have a bike
  <input type="checkbox" name="vehicle" value="Bike" class = "yourClass"> I have a bike
  <input type="checkbox" name="vehicle" value="Bike"> The one without the class

Answer 4

As you can see by the other solutions, there are many ways to accomplish what you want. Another way is to use the "cascading" aspect of cascading style sheets by overriding the style within the element:

input[type="checkbox"] {
  display: none;
}

<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" style="display:initial" />