Sometimes, we want to style a selected radio buttons label with CSS.
In this article, we’ll look at how to style a selected radio buttons label with CSS.
How to style a selected radio buttons label with CSS?
To style a selected radio buttons label with CSS, we change the background color of the radio buttons.
For instance, we write
<div class="radio-toolbar">
<label><input type="radio" value="all" checked /><span>All</span></label>
<label><input type="radio" value="false" /><span>Open</span></label>
<label><input type="radio" value="true" /><span>Archived</span></label>
</div>
to add the radio buttons.
Then we write
.radio-toolbar input[type="radio"]:checked ~ * {
background: pink !important;
}
to select the radio buttons and sett their background color to pink.
Conclusion
To style a selected radio buttons label with CSS, we change the background color of the radio buttons.
