Changing color of radio-button

Question

In the default CSS code for radio buttonn, it is gray when it is not selected and is blue when it is selected:

I however need it to be black in both states. Thus, I have overriden SCSS for radio buttons. Here comes my code:

HTML:

     <div class="col-md-2 col-sm-6">                
        <div class="row">
          <div class="col-md-12">
            <label>Earlier experience in this field?</label>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div class="radio">
              <label><input type="radio" formControlName="earlierExperience" value="1">Yes</label>
            </div>
          </div>
          <div class="col-md-6">
            <div class="radio">
              <label><input type="radio" formControlName="earlierExperience" value="0">No</label>
            </div>
          </div>
        </div>
      </div>

CSS:

input[type='radio']:after {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  top: -2px;
  left: -1px;
  position: relative;
  background-color:white;
  display: inline-block;
  visibility: visible;
  border: 1px solid black;
}

input[type='radio']:checked:after {
  border: 4.5px solid black;  
}

The problem with this code is that the small circle in the middle of the checked button is not shown anymore:

Can you help me with this?

It's not really possible to style default radio buttons (same for checkboxes), and their appearance depends on the browser (It will be different even between Chrome on Mac and Chrome on Windows). The best way to achieve the result is to hide the default radio and redraw it with CSS and pseudo-elements. You can google it as "custom style radio button" — Vladislav Akhmetvaliyev, Sep 28 '21 at 15:12
@VladislavAkhmetvaliyev it is now possible with the `accent-color` property — MrThunder, Sep 28 '21 at 18:16
@MrThunder 40% browser support can not be called "now possible" — Vladislav Akhmetvaliyev, Sep 29 '21 at 11:07
@VladislavAkhmetvaliyev it has browser support in the latest chrome, edge and firefox, so it is possible. — MrThunder, Sep 29 '21 at 18:56

score 4 · Answer 1 · answered Sep 28 '21 at 16:59

You can use the new property accent-color which sets the colour for the input. Broswer support is limited to Chrome and Firefox at the moment so you will create fallbacks for other browsers.

input {accent-color: black;}

input {
  accent-color: black;
}

    <div class="col-md-2 col-sm-6">                
        <div class="row">
          <div class="col-md-12">
            <label>Earlier experience in this field?</label>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div class="radio">
              <label><input type="radio" formControlName="earlierExperience" value="1">Yes</label>
            </div>
          </div>
          <div class="col-md-6">
            <div class="radio">
              <label><input type="radio" formControlName="earlierExperience" value="0">No</label>
            </div>
          </div>
        </div>
      </div>

I am familiar with accent.color, but it affects just the checked radio button, while as I have stated in the question, I need even the outer circle of the button be black (or any other custom color). — Alpha Bravo Charlie ..., Sep 29 '21 at 09:22

Anton · Answer 2 · 2021-09-29T11:25:26.270

For solution, you can use property filter in css.

input[type='radio'] {
  filter: grayscale(100%) contrast(200%);
}

input[type='radio'] {
  filter: grayscale(100%) contrast(200%);
}

<div class="col-md-2 col-sm-6">
  <div class="row">
    <div class="col-md-12">
      <label>Earlier experience in this field?</label>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="radio">
        <label>
              <input
                type="radio"
                formControlName="earlierExperience"
                value="1"
              />Yes
            </label>
      </div>
    </div>
    <div class="col-md-6">
      <div class="radio">
        <label>
              <input
                type="radio"
                formControlName="earlierExperience"
                value="0"
              />No
            </label>
      </div>
    </div>
  </div>
</div>

Custom solution with box-shadow, pseudo-element and input binding to label

.radio {
  margin-left: 0.125em;
}

.radio label {
  position: relative;
  padding-left: 1.5em;
  cursor: pointer;
}

.radio label::after {
  content: '';
  width: 1em;
  height: 1em;
  position: absolute;
  top: 0;
  left: 0.25em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px black;
}

input[type='radio'] {
  position: absolute;
  visibility: hidden;
}

input[type='radio']:checked~label::after {
  box-shadow: inset 0 0 0 2px black, inset 0 0 0 4px white, inset 0 0 0 10px rgb(0, 0, 0);
}

<div class="col-md-2 col-sm-6">
  <div class="row">
    <div class="col-md-12">
      <label>Earlier experience in this field?</label>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="radio">
        <input id="yes" type="radio" name="radio" formControlName="earlierExperience" value="1" />
        <label for="yes"> Yes </label>
      </div>
    </div>
    <div class="col-md-6">
      <div class="radio">
        <input id="no" type="radio" name="radio" formControlName="earlierExperience" value="0" />
        <label for="no"> No </label>
      </div>
    </div>
  </div>
</div>

That's a clever solution, works perfectly as a fallback for the "accent-color" property. — MrThunder, Sep 28 '21 at 21:18
Thanks. But as I stated in the question, the unchecked radio should also be black (the outer crircle has to be black); while this solution makes a radio button gray (or even very gray), but not black. — Alpha Bravo Charlie ..., Sep 29 '21 at 09:20
In this case, you need to create a custom *radio* button. I added another snippet above. — Anton, Sep 29 '21 at 11:25

M Junaid · Answer 3 · 2023-07-30T05:41:39.523

this is very easy to change radio button color. I tried my best and I finally I find a simple css style to change selected radio button color. I am changing it to red color. use your color to place of red.

css

 accent-color: red;

example

 <input type="radio" name="Example" value="Example" style=" accent-color: red;" />

this is best way to change radio button color without a big effort. I hope everyone like it.

Changing color of radio-button

3 Answers3