Style all Inputs but checkbox and radio

Question

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?

Savoirvivre

Answer 1

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.

Chrystal

I found I needed quotes around the word radio and the word checkbox, otherwise this works great, thanks! input:not([type='radio']):not([type='checkbox']) – Donaugh

Answer 2

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://mcmap.net/q/470413/-operation-with-all-inputs-without-type-quot-checkbox-quot

Greywacke

Answer 3

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*/ }

Predominate

I can't add to this html unfortunately without JavaScript. I am using Drupal for my CMS, and we've used these inputs in multiple different scenarios at this point. – Savoirvivre

Can you use Javascript? – Predominate

Unfortunately I can not. I think I will have to add each type of input in this format input[type="TYPE1"], input[type="TYPE2"] I just can't find a good enough list with all the types. – Savoirvivre

Answer 4

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

Bendy