CODEWITHSUNDEEP
csssassradio-button
Alpha Bravo Charlie ...
Alpha Bravo Charlie ...

Reputation: 820

Changing color of radio-button

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

enter image description here

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:

enter image description here

Can you help me with this?

Upvotes: 2

Views: 10847

Answers (3)

M Junaid
M Junaid

Reputation: 924

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.

Upvotes: 0

Anton
Anton

Reputation: 8538

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>

Upvotes: 3

MrThunder
MrThunder

Reputation: 745

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>

Upvotes: 4

Related Questions