How to change style of radio and checkbox input [duplicate]

Question

I have a website where I'm trying to change the background color of the dot of a radio button. Right now it seems to be transparent so it gets the color of whatever the background is. I tried using CSS and setting "background: white;" for example, however this has no effect in the browser. Any ideas of cool tricks to use to achieve this?

Same question stands for checkbox as well.

Answer 1

It's been well stablished that you cannot change every detail on browser generated controls. For example the color of the arrow on a select dropdown, or the dot of a radio, etc...

You can create your custom controls, use some library like JQuery UI, or.... maybe play around a little with css.

Here's an experiment to fake 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 2

The browser itself handles the look of radio buttons and checkboxes, as well as dropdown/selects. You can however hide the radio buttons, replace them with images, and then modify your radio/check value using jQuery. Font Awesome (http://fortawesome.github.io/Font-Awesome/icons/) has some cool icons that you can use for 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 3

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>  

Answer 4

The preferred method for styling the non-label elements of checkboxes and radio buttons with CSS is to essentially replace them with images that represent their current state (unchecked, checked, etc).

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