How change the color of the radio button

Question

Is it possible to change the background-color of a radio button by CSS ? I looked on the internet but I only find solutions in JS and I do not understand them necessarily. I tried this but it doesn't work :

input[type="radio"]:checked {
  background-color: red;
}

<div class="sound-signal">
  Signal sonore :
  <input type="radio" name="soundsignal" id="soundsignal" checked="checked">
  <label for="soundsignal">Oui</label>
  <input type="radio" name="soundsignal">
  <label for="soundsignal">Non</label>
</div>

It's a duplicate question. Look here for answer: https://stackoverflow.com/a/4253939/4342197 — Eric Sjöström, Jul 26 '17 at 12:33
@ehsan — It's a duplicate question, so: No. If you can give a better answer, then give it on the original question. — Quentin, Jul 26 '17 at 12:49

Vadim Ovchinnikov · Accepted Answer · 2023-01-25T10:35:37.110

There are two ways to style radio buttons (and checkboxes by the way) only with CSS:

via styling label's pseudoselector and hiding radio buttons

/* completely hiding radio button */
input[type="radio"] {
  display: none;
}

/* simulate radiobutton appearance using pseudoselector */
input[type="radio"] + label:before {
  content: "";
  /* create custom radiobutton appearance */
  display: inline-block;
  width: 15px;
  height: 15px;
  padding: 3px;
  margin-right: 5px;
  /* background-color only for content */
  background-clip: content-box;
  border: 1px solid #bbbbbb;
  background-color: #e7e6e7;
  border-radius: 50%;
}

/* appearance of checked radiobutton */
input[type="radio"]:checked + label:before {
  background-color: red;
}

/* resetting default box-sizing */
*,
*:before,
*:after {
  box-sizing: border-box;
}

/* optional styles for centering radiobuttons */
.sound-signal label {
  display: inline-flex;
  align-items: center;
}

<div class="sound-signal">
  Signal sonore:
  <input type="radio" name="soundsignal" id="soundsignal1" checked="checked">
  <label for="soundsignal1">Oui</label>
  <input type="radio" name="soundsignal" id="soundsignal2">
  <label for="soundsignal2">Non</label>
</div>

via hiding standard appearance using CSS appearance: none and applying custom appearance. Unfortunately this way doesn't work in IE.

input[type="radio"] {
  /* remove standard background appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* create custom radiobutton appearance */
  display: inline-block;
  width: 15px;
  height: 15px;
  padding: 3px;
  /* background-color only for content */
  background-clip: content-box;
  border: 1px solid #bbbbbb;
  background-color: #e7e6e7;
  border-radius: 50%;
}

/* appearance for checked radiobutton */
input[type="radio"]:checked {
  background-color: red;
}

/* optional styles for centering radiobuttons */
.sound-signal {
  display: flex;
  align-items: center;
}

<div class="sound-signal">
  Signal sonore :
  <input type="radio" name="soundsignal" id="soundsignal1" checked="checked">
  <label for="soundsignal1">Oui</label>
  <input type="radio" name="soundsignal" id="soundsignal2">
  <label for="soundsignal2">Non</label>
</div>

Option 1- works like charm. Cheers – Maverick09 Jun 13 '19 at 14:14 — Maverick09, Jun 13 '19 at 14:14
@Ramya Glad to be helpful for you! – Vadim Ovchinnikov Jul 05 '21 at 19:40 — Vadim Ovchinnikov, Jul 05 '21 at 19:40
fast forwarding to 2021, this still helped me... ty – Padua Oct 12 '21 at 12:35 — Padua, Oct 12 '21 at 12:35
The second one works both on Edge and Safari. – newguy Jan 25 '23 at 10:17 — newguy, Jan 25 '23 at 10:17

How change the color of the radio button

1 Answers1

Linked