html – RadioButton customization


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?


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>

Scroll to Top