CODEWITHSUNDEEP
csscheckboxradio-button
e.shell
e.shell

Reputation: 462

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?

Upvotes: 31

Views: 28573

Answers (4)

Andres Paul
Andres Paul

Reputation: 1078

If you want to use it inside a Javascript file, you could use this instead: 

$("input").not(["type=checkbox"]).not("#id").each(function() {

I'm using it for example in a loop, excluding all the checkboxes and the element with id = id

Upvotes: 2

dav
dav

Reputation: 9277

If you can use javascript, specifically jquery, than you can use this

$("input:not(:checkbox):not(:radio), select").addClass('myClass');

which will add class myClass to all inputs(and selects) but radio and checkbox

taken from this answer https://stackoverflow.com/a/2893606/932473

Upvotes: 3

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201866

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.

Upvotes: 89

tjons
tjons

Reputation: 4769

You need to style all the other types except these two, awful as it may be.

You could try to add a class to the ones you don't want styled, and then use this in your CSS:

 input:not(.not){ /*Whatever styling you use*/ }

Upvotes: 1

Related Questions