mmvsbg mmvsbg - 6 months ago 10
HTML Question

How to change style of radio and checkbox input

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

jsBin demo

Custom radio and checkbox using css

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>