Select all input tags where type is not checkbox

Question

I need CSS selector that match all input tags where type is not checkbox.

This match:

<input value="Meow!" />

<input type="password" />

...but this does not:

<input type="checkbox" />

Because type is checkbox!

This is what I have at the moment:

input:not(type="checkbox")

Unfortunately, it does not work!

So here comes my questions:

1. How to fix my CSS3 selector?
2. Is it possible without CSS3 and JavaScript?
3. Is it possible without CSS3, but with use of JavaScript?

Thanks in any advice!

Answer 1

1. Your attribute selector is missing the square brackets:

   input:not([type="checkbox"])
   

2. If you're applying styles you will need to make use of an override rule in CSS:

   input {
       /* Styles for all inputs */
   }
   
   input[type="checkbox"] {
       /* Override and revert above styles for checkbox inputs */
   }
   

   As you can imagine, it's almost impossible to do this for form elements because their browser-default styles aren't well-defined in CSS.

3. jQuery provides a :checkbox selector that you can use:

   $('input:not(:checkbox)')
   

   You can also use the same selector as you do in CSS:

   $('input:not([type="checkbox"])')
   

Answer 2

input:not([type="checkbox"])