1

I'm developing an electron app using the react, and I must implement the radio button following the below prototype image. As you can see, I'd like to change the background color (the color code is rgba(255,252,229,1)) of a radio button's "circle" by CSS. I googled about this, however, I couldn't find the answer...

enter image description here

The similar questions were changing the border and "checked" circle in a radio button.

I tried the below codes, but the background didn't change... (Note: the color code I'd like to implement is rgba(255,252,229,1), but it's not clear. So, in this question, the color I'd like to implement is "green".)

  • background and background-color
.radio-button-input[type=radio]{
    width: 33px;
    height: 33px;

    background-color: green;
}

==> Not changed.

  • accent-color
.radio-button-input[type=radio]{
    width: 33px;
    height: 33px;

    accent-color: green;
}

enter image description here

===> "Checked" circle, not background circle, was changed

jjjkkkjjj
  • 51
  • 1
  • 7

2 Answers2

3

With CSS accent-color property you can only change the color of radio buttons. For your requirement you might need to restyle the radio buttons and this can be done using appearance: none property.

By using appearance: none, we can remove all browser styling from the radio button. Now, we can then use other CSS properties like background, border etc. to create our own custom radio buttons. The :checked CSS selector can be used to style the radio button in a "checked" state.

Browser Compatibility: supported by all browsers

.input-group label{
  font-size: 2.8rem;  
}

input[type=radio]{
  appearance: none;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background-clip: content-box;
  border: 2px solid rgba(255,252,229,1);
  background-color: rgba(255,252,229,1);
}

input[type="radio"]:checked {
  background-color: #000;
  padding: 4px;
  border: 2px solid #000;
}
<div class="input-group">
  <label><input name="gender" type="radio" checked />Male</label>
</div>
<div class="input-group">
  <label><input name="gender" type="radio" />Female</label>
</div>
Varun Verma
  • 31
  • 1
  • Great! Thank you! Can I fill the "checked" white part with `rgba(255,252,229,1)` as the border and background remains black? – jjjkkkjjj Dec 12 '22 at 07:26
1

Use css accent-color

input {
  accent-color: auto;
  display: block;
  width: 33px;
  height: 33px;
}

input.custom {
  accent-color: green;
}
<label> My Custom radio
<input type="radio" class="custom" />
</label>

Any further customisations would require building your own radio input.

ksav
  • 20,015
  • 6
  • 46
  • 66
  • Thanks, but i'd like to change the background color of circle with "not checked" state. – jjjkkkjjj Dec 12 '22 at 05:17
  • You might have some luck building a custom radio input here https://stackoverflow.com/a/38468320/5385381 – ksav Dec 12 '22 at 05:19