Style all Inputs but checkbox and radio

css checkbox radio
e.shell picture e.shell · Feb 7, 2014 · Viewed 16.4k times · Source

I am trying to use a style where I use

input:not([type=checkbox]),
input:not([type=radio]){ ...

But clearly that won't work. How can I use the styles I have written for all inputs but just these two?

Answer

Jukka K. Korpela picture Jukka K. Korpela · Feb 7, 2014

You need to use a single combined selector instead of two selectors:

input:not([type=checkbox]):not([type=radio]) { ... }

This selects any input element that does not have the attribute type=checkbox and that does not have the attribute type=radio. The code in the question, with two selectors, selects all input elements that do not have the attribute type=checkbox and additionally all input elements that do not have the attribute type=radio, so it ends up with selecting all input elements.

Usual CSS Caveats apply. You may wish to use polyfill like Selectivzr to cover old versions of IE.

Related questions

How to grey out checkbox unless radio button is selected?

very new to javascript, but any help to get me started would be appreciated. I have a simple form: <div><input type="radio" name="o1" id="burger" />Burger</div> <div id="yesFries">&…

Read More
How do i remove the blue outline from a radio box when focused?

I would like to remove the blue outline it gives me when my radio is clicked/focused. I tried using outline: none and border: none, but nothing seems to be working. Does anyone have a solution for this? Screenshot of …

Read More
How to style a checkbox using CSS

I am trying to style a checkbox using the following: But the style is not applied. The checkbox still displays its default style. How do I give it the specified style?

Read More