How to change radio style and checkbox entry

Question

I have a website where I am trying to change the background color of a switch point. Now it seems transparent, so it gets the color of any background. I tried using CSS and setting "background: white;" , for example, however, this does not affect the browser. Any ideas on good tricks you can use to achieve this?

The same question means a checkbox.

Answer 1

jsBin demo

This method uses a label element attached to hidden input elements, which receives the state :checked , will change the value of the :before pseudo-element:

 /* COMMON RADIO AND CHECKBOX STYLES */ input[type=radio], input[type=checkbox]{ /* Hide original inputs */ visibility: hidden; position: absolute; } input[type=radio] + label:before, input[type=checkbox] + label:before{ height:12px; width:12px; margin-right: 2px; content: " "; display:inline-block; vertical-align: baseline; border:1px solid #777; } input[type=radio]:checked + label:before, input[type=checkbox]:checked + label:before{ background:gold; } /* CUSTOM RADIO AND CHECKBOX STYLES */ input[type=radio] + label:before{ border-radius:50%; } input[type=checkbox] + label:before{ border-radius:2px; } 

 <input type="radio" name="r" id="r1"><label for="r1">Radio 1</label> <input type="radio" name="r" id="r2"><label for="r2">Radio 2</label> <input type="checkbox" name="c1" id="c1"><label for="c1">Check 1</label> <input type="checkbox" name="c2" id="c2"><label for="c2">check 2</label> 

Answer 2

It has been well established that you cannot change every detail in browser-controlled controls. For example, the color of the arrow in the drop-down list, or the point of the radio, etc.

You can create your own controls, use some library, for example, JQuery UI, or ... maybe play a little with css.

Here's an experiment on faking a colored dot on a radio using :before pseudo-element:

http://jsfiddle.net/bvtngh57/

 input[type="radio"]:checked:before { content: ""; display: block; position: relative; top: 3px; left: 3px; width: 6px; height: 6px; border-radius: 50%; background: red; } 

Result:

Answer 3

The preferred method for styling elements without checkboxes and CSS checkboxes is to essentially replace them with images that represent their current state (unverified, checked, etc.).

See Ryan Seddon's article: http://www.thecssninja.com/css/custom-inputs-using-css

Answer 4

There are many ways to do this, all of which are related to getting rid of DOM styles, since it is impossible to do without these “tricks”. Here's a sample of Chris Coyier (just read the page, skip step 1 and just prepare the images and CSS)

 /* Hide the original radios and checkboxes (but still accessible) :not(#foo) > is a rule filter to block browsers that don't support that selector from applying rules they shouldn't */ li:not(#foo) > fieldset > div > span > input[type='radio'], li:not(#foo) > fieldset > div > span > input[type='checkbox'] { /* Hide the input, but have it still be clickable */ opacity: 0; float: left; width: 18px; } li:not(#foo) > fieldset > div > span > input[type='radio'] + label, li:not(#foo) > fieldset > div > span > input[type='checkbox'] + label { margin: 0; clear: none; /* Left padding makes room for image */ padding: 5px 0 4px 24px; /* Make look clickable because they are */ cursor: pointer; background: url(off.png) left center no-repeat; } /* Change from unchecked to checked graphic */ li:not(#foo) > fieldset > div > span > input[type='radio']:checked + label { background-image: url(radio.png); } li:not(#foo) > fieldset > div > span > input[type='checkbox']:checked + label { background-image: url(check.png); } 

Answer 5

The browser itself handles the appearance of switches and flags, as well as a drop-down list / selects. However, you can hide the radio buttons, replace them with images, and then change your radio / check the value using jQuery. The Awesome font ( http://fortawesome.imtqy.com/Font-Awesome/icons/ ) contains some interesting icons that you can use to do this.

Here is a demo

 <div> Radio 1 - <input type="radio" name="radio" class="radio" value="1" /> <span class="red fa fa-circle-o"></span> </div> <div> Radio 2 - <input type="radio" name="radio" class="radio" value="2" /> <span class="blue fa fa-circle-o"></span> </div> $('span.fa').on('click', function() { $('span.fa').removeClass('fa fa-dot-circle-o').addClass('fa fa-circle-o'); $(this).removeClass('fa-circle-o').addClass('fa-dot-circle-o'); //Check corresponding hidden radio $(this).prev('input.radio').prop('checked', true); }); 

Answer 6

You can create ionic radio buttons using only css. Check out the script:

https://jsfiddle.net/sreekanthjayan/0d9vj86k/

  <div> <ion-radio class="radio radio-inline radio-gray" ng-model="choice" ng-value="'A'">iOS</ion-radio> <ion-radio class="radio radio-inline radio-teal" ng-model="choice" ng-value="'B'">Android</ion-radio> <ion-radio class="radio radio-inline radio-blue" ng-model="choice" ng-value="'C'">Windows Phone</ion-radio> </div> .radio .radio-icon { visibility: visible !important; } .radio .radio-icon:before { content: "" !important; border: 2px solid black !important; width: 24px !important; height: 24px !important; border-radius: 50% !important; overflow: hidden !important; } .radio .radio-icon:after { content: "" !important; position: absolute !important; right: 20px !important; top: 22px !important; background: black !important; width: 12px !important; height: 12px !important; border-radius: 50% !important; overflow: hidden !important; transition: -webkit-transform .28s cubic-bezier(0.420, 0.000, 0.000, 1.650); transition: transform .28s cubic-bezier(0.420, 0.000, 0.000, 1.650); -webkit-transform: scale(0); transform: scale(0); } .radio.item-radio > input[type=radio]:checked ~ .radio-icon:after { -webkit-transform: scale(1); transform: scale(1); } .radio .item-content { background-color: #fff; margin: 0; padding-right: 50px; padding-left: 0px; } .radio.item-radio > input[type=radio]:checked ~ .item-content { background-color: #fff; } .radio-inline.item { display: inline-block; border: none; margin: 0; height: 50px; } .radio-blue .radio-icon:after { background: #2196F3 !important; } .radio-blue .radio-icon:before { border-color: #2196F3 !important; } .radio-teal .radio-icon:after { background: #009688 !important; } .radio-teal .radio-icon:before { border-color: #009688 !important; } .radio-gray .radio-icon:after { background: #B6B6B6 !important; } .radio-gray .radio-icon:before { border-color: #B6B6B6 !important; }