How to style a selected radio buttons label with CSS?

Spread the love

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.

Leave a Reply

Your email address will not be published.