1

I'm customizing the radios of radio buttons with CSS. I applied background image to the label and hide original input radio buttons. Don't know why background image not changing on checked and unchecked.

Code:

.frm-radio input[type="radio"] {
  display: none;
}

.frm-radio::before {
  cursor: pointer;
  display: inline-block;
  height: 16px;
  width: 16px;
  overflow: hidden;
  content: "";
  background-image: url("data:image/svg+xml,%0A%3Csvg%20fill%3D%22%23262626%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M12%202C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm0%2018c-4.42%200-8-3.58-8-8s3.58-8%208-8%208%203.58%208%208-3.58%208-8%208z%22%3E%3C%2Fpath%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

.frm-radio input[type="radio"]:checked+.frm-radio::before {
  background-image: url("data:image/svg+xml,%0A%3Csvg%20fill%3D%22%23262626%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M12%207c-2.76%200-5%202.24-5%205s2.24%205%205%205%205-2.24%205-5-2.24-5-5-5zm0-5C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm0%2018c-4.42%200-8-3.58-8-8s3.58-8%208-8%208%203.58%208%208-3.58%208-8%208z%22%3E%3C%2Fpath%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E");
}
<label class="frm-radio" for="radio"><input type="radio" name="ok" id="radio"> Radio</label>
<label class="frm-radio" for="radio2"><input type="radio" name="ok" id="radio2"> Radio</label>
Arjan Knol
  • 942
  • 5
  • 20
Ankit Singh
  • 79
  • 3
  • 12
  • 1
    In CSS you cannot select "upwards", which means you cannot style an element depending upon the content of the element (which you are trying to do). Also, CSS rules only apply to the last element (class, id, ...) in the selector. – connexo Jun 26 '17 at 12:12
  • Your selector (`+`) only works if the label is *after* the input. It doesn't work with the input inside the label. Example: https://jsfiddle.net/yvcr2cwt/ – Kobi Jun 26 '17 at 12:15
  • How is this a duplicate.. – user5014677 Jun 26 '17 at 12:17
  • This is a better duplicate: [CSS selector for a checked radio button's label](https://stackoverflow.com/q/1431726/7586) – Kobi Jun 26 '17 at 12:19

1 Answers1

2

You need to change the position of the inputs so you can select the label depending on the state of the radiobutton: 

input[type="radio"] {
  display: none;
}

.frm-radio::before {
  cursor: pointer;
  display: inline-block;
  height: 16px;
  width: 16px;
  overflow: hidden;
  content: "";
  background-image: url("data:image/svg+xml,%0A%3Csvg%20fill%3D%22%23262626%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M12%202C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm0%2018c-4.42%200-8-3.58-8-8s3.58-8%208-8%208%203.58%208%208-3.58%208-8%208z%22%3E%3C%2Fpath%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

input[type="radio"]:checked+.frm-radio::before {
  background-image: url("data:image/svg+xml,%0A%3Csvg%20fill%3D%22%23262626%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M12%207c-2.76%200-5%202.24-5%205s2.24%205%205%205%205-2.24%205-5-2.24-5-5-5zm0-5C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm0%2018c-4.42%200-8-3.58-8-8s3.58-8%208-8%208%203.58%208%208-3.58%208-8%208z%22%3E%3C%2Fpath%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E");
}
<input type="radio" name="ok" id="radio"><label class="frm-radio" for="radio"> Radio</label>
<input type="radio" name="ok" id="radio2"><label class="frm-radio" for="radio2"> Radio</label>
connexo
  • 53,704
  • 14
  • 91
  • 128