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?
CodePudding user response：
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>CodePudding user response：
For solution, you can use property filter in css.
input[type='radio'] {
filter: grayscale(100%) contrast(200%);
}