html – RadioButton customization

Question:

Faced the already classic problem of customizing the radio buttons. So, there is a set of icons. Question: how best to customize the RadioButton by selecting one of the icons for further sending data? or is there another way to implement what i need?

Answer:

The radio and checkbox elements are customizable with label :

label.custom-radio input {
  display: none;
}

label.custom-radio input+div {
  content: "\a";
  background: green;
  width: 20px;
  height: 20px;
}

label.custom-radio input:checked+div {
  background: red;
}
<label class="custom-radio"><input type="radio"><div></div></label>

http://jsfiddle.net/oceog/uYZM2/

Scroll to Top