How to Change Style of Radio and Checkbox Input

How to change style of radio and checkbox input

jsBin demo

This technique uses the label element bound to hidden input elements, that receiving a :checked state will change the apperance 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>  

styling checkbox and radio button

Seeing as you can't change your html, a pure css solution isn't available. You suggest that javascript is acceptable, so below is a solution using javascript and some modifications to your css:

Updated codepen

The method here is to iterate through your inputs in javascript, add unique IDs, surround the text nodes with a label matching said IDs, and add a class of "styled" (this along with the changes to the CSS means that, should a non-javascript browser encounter this page it will still display correctly according to OS defaults).

I've made a few other necessary changes to your CSS too, however it's a bit messy so you may want to play around with positioning etc.

The important thing, though, is that I've made no changes to the HTML :)

Disclaimer: I'm not very good with javascript so there's probably a better way of implementing this.

Javascript:

var checkboxesToStyle = document.querySelectorAll("input[type=checkbox]");

var radiosToStyle = document.querySelectorAll("input[type=radio]");

var plainLabel = null;
var labelText = null;
var newLabel = null;

for (var i = 0; i < checkboxesToStyle.length; i++) {
    checkboxesToStyle[i].id = "check" + i;
    plainLabel = checkboxesToStyle[i].nextSibling;
    labelText = plainLabel.nodeValue;
    plainLabel.remove();
    newLabel = document.createElement("label");
    newLabel.setAttribute("for", "check" + i);
    newLabel.innerHTML = labelText;
    checkboxesToStyle[i].parentNode.appendChild(newLabel);
    checkboxesToStyle[i].className = 'styled';
}

plainLabel = null;
labelText = null;
newLabel = null;

for (var i = 0; i < radiosToStyle.length; i++) {
    radiosToStyle[i].id = "radio" + i;
    plainLabel = radiosToStyle[i].nextSibling;
    labelText = plainLabel.nodeValue;
    plainLabel.remove();
    newLabel = document.createElement("label");
    newLabel.setAttribute("for", "radio" + i);
    newLabel.innerHTML = labelText;
    radiosToStyle[i].parentNode.appendChild(newLabel);
    radiosToStyle[i].className = 'styled';
}

How to change the style of radio button in FireFox?

I like Sato's answer, but you could also add this to your CSS:

input[type='radio'] {
  -moz-appearance: initial !important;
}

I'd try to avoid using !important in your CSS, it's not a good practice to use. I think if you remove it from your code, you could probably remove it from my snippet.

How do I change the color of radio buttons?

A radio button is a native element specific to each OS/browser. There is no way to change its color/style, unless you want to implement custom images or use a custom Javascript library which includes images (e.g. this - cached link)

Need to convert Checkbox to look like radion button using css Apprearace property

Most of the CSS appearance property other than none and auto will not be supported in all the newer versions of major browsers. This is to preserve the original semantics of the widgets across browsers.

W3 Reference

The only way to convert your checkboxes into "radio buttons" now is to manually override the default css styling of the element with your custom css.

Something like this:

input[type="checkbox"]{
  visibility: hidden;
  position: absolute;
}
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="checkbox"]:checked + label:before{
  background-color: black;
}
input[type="checkbox"] + label:before{
  border-radius:50%;
}

<input type="checkbox" name="checkbox" id="01"><label for="01">Radio button 1</label>
<input type="checkbox" name="checkbox" id="02"><label for="02">Radio button 2</label>

css changing checkbox and radio buttons displaying nothing

.checkbox input[type='checkbox'],.radio input[type='radio'] {  position: relative;  display: none;  //margin-left: 0}.radio input[type=radio]+label::before {  content: '\f10c';  font-family: 'FontAwesome';  font-size: 115%;  display: inline-block;  letter-spacing: .75em}
.radio input[type=radio]:checked+label::before {  content: '\f192';  color: red;}

<div class="radio">   <input name="option[240]" value="34" type="radio" id="rad" />   <label for="rad">White</label></div>

How to style a checkbox using CSS

UPDATE:

The below answer references the state of things before widespread availability of CSS 3. In modern browsers (including Internet Explorer 9 and later) it is more straightforward to create checkbox replacements with your preferred styling, without using JavaScript.

Here are some useful links:

• Creating Custom Form Checkboxes with Just CSS
• Easy CSS Checkbox Generator
• Stuff You Can Do With The Checkbox Hack
• Implementing Custom Checkboxes and Radio Buttons with CSS3
• How to Style a Checkbox With CSS

It is worth noting that the fundamental issue has not changed. You still can't apply styles (borders, etc.) directly to the checkbox element and have those styles affect the display of the HTML checkbox. What has changed, however, is that it's now possible to hide the actual checkbox and replace it with a styled element of your own, using nothing but CSS. In particular, because CSS now has a widely supported :checked selector, you can make your replacement correctly reflect the checked status of the box.

---

OLDER ANSWER

Here's a useful article about styling checkboxes. Basically, that writer found that it varies tremendously from browser to browser, and that many browsers always display the default checkbox no matter how you style it. So there really isn't an easy way.

It's not hard to imagine a workaround where you would use JavaScript to overlay an image on the checkbox and have clicks on that image cause the real checkbox to be checked. Users without JavaScript would see the default checkbox.

Edited to add: here's a nice script that does this for you; it hides the real checkbox element, replaces it with a styled span, and redirects the click events.

---

Related Topics