Search code examples
csscheckboxradio-button

Style all Inputs but checkbox and radio

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?

Solution

  • 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.