Style all Inputs but checkbox and radio

input type=radio css
checkbox css style examples
jquery select all input except one
radio button size css
input select css
not checkbox jquery
css input not(:checked)
input:not((value))

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?

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.

Styling native Checkboxes and Radio inputs (CSS Only), So, do you want to style native radio and checkboxes without relying on but all the browsers suport the appearance:none very well because  That means that if i set appearance: none to a checkbox, the element is still a checkbox, but without any appearance (system style). The opposite is also valid, giving an element appearance: button , for example, will not turn that element in a button, the element will only have the button appearance.

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

:checked, It is only associated with input () elements of type radio and. input[type=​checkbox] + label { color: #ccc; font-style: italic; } These related posts were algorithmically generated and displayed here without any load on my server at all​, thanks to Not just to find out the element checked but also to style it:. We'll cover checkboxes further in this tutorial, the principle is the same. Each input is wrapped into a div with a container class. Also, each input has a label with a span in it. Important! Since we've hidden the radio and checkbox inputs, the only way for us to access them would be by using a label tag.

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

Custom Styling Form Inputs With Modern CSS Features, It's entirely possible to build custom checkboxes, radio buttons, and toggle Custom Styling Form Inputs With Modern CSS Features That's it for the HTML part, but of course it's recommended to have name First of all, we check for the support of appearance: none; , including it's prefixed companions. While radio buttons require both spans, only one is needed for checkboxes. We hide the checkboxes and radio buttons in the stylesheet: 12345678. input[type=checkbox]:not(old),input[type=radio ]:not(old){ width: 2em; margin: 0; padding: 0; font-size: 1em; opacity: 0;}

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

<input type="radio">, There's not much new to note here except for the addition of <fieldset> transition: 0.2s all linear; margin-right: 5px; position: relative; top: 4px; By default, radio buttons (and checkboxes) are styled with the  Things sure have gotten easier than they were! The reason is that we can finally style the ::before and ::after pseudo-elements on the <input> tag itself. This means we can keep and style an <input> and won’t need any extra elements.

:checked, Matches any checked/selected radio, checkbox, or option */ :checked <div> <​input type="radio" name="my-input" id="yes"> <label to let the user toggle content based on the state of a checkbox, all without using JavaScript. Note: For an analogous effect, but based on the :hover pseudo-class and  Login Form Signup Form Checkout Form Contact Form Social Login Form Register Form Form with Icons Newsletter Stacked Form Responsive Form Popup Form Inline Form Clear Input Field Hide Number Arrows Copy Text to Clipboard Animated Search Search Button Fullscreen Search Input Field in Navbar Login Form in Navbar Custom Checkbox/Radio Custom Select Toggle Switch Check Checkbox Detect Caps Lock Trigger Button on Enter Password Validation Toggle Password Visibility Multiple Step Form Autocomplete

Checkboxes & Radio Buttons, <fieldset> <legend>Checkboxes</legend> <input type="checkbox" Use checkboxes & radio buttons when users need to see all the available options at a​  input[type="checkbox"] { border: none; } This works fine with FireFox and Chrome but not ie 8, an when I use the Developer Tools in ie to inspect the element I can see both styles have been picked up but it's only when I deselect the check box beside the input style does the border disappear for the check boxes. This is the default:

CSS vs SVG: Styling Checkboxes and Radio Buttons, But they're also not particularly hard to style either. I will assume we have both checkboxes and radio inputs in one form, so it is useful to and browser support (SVG starts at IE9 and above + all other modern browsers). Radio buttons let a user select only one of a limited number of choices: The <input type="radio"> defines a radio button. Radio buttons are normally presented in radio groups (a collection of radio buttons describing a set of related options). Only one radio button in a group can be selected at the same time.

Comments
  • 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'])
  • 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.
  • Can you use Javascript?
  • 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.