Changing color of radio-button - css

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?

Answer 1

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>

Answer 2

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>