Style radio buttons once checked/selected - css

Question

I'm trying to change the colour of radio buttons and button label when the radio button has been selected. Have tried this.
input[type='radio']:checked {
background: yellow !important;
}
<label
className='tag-item'
key={tag}
htmlFor={`filter-${tag}`}
clickable='true'>
<span>{tag}</span>
<input
type='radio'
name='tag'
id={`filter-${tag}`}
value={tag}
checked={tag === currentTag}
onChange={e => setCurrentTag(e.target.value)}
className='tag-radio'
/>
</label>

Answer 1

You can't change the default Radio button's color.
But you can do this with some trick.
input[type=radio]{
display: none;
}
.fake-radio{
position: relative;
display: inline-block;
width: 12px;
height: 12px;
border: 1px solid gray;
border-radius: 100%;
}
.fake-radio::before{
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 6px;
height: 6px;
background-color: gray;
border-radius: 100%;
}
input[type=radio]:checked + .fake-radio{
border-color: red;
}
input[type=radio]:checked + .fake-radio::before{
background-color: red;
}
<label>
<span>Tag</span>
<input type="radio" />
<span class="fake-radio"></span>
</label>