How Can I Style Selected Radio Button Labels with CSS?

Styling Selected Radio Button Labels in CSS

To style the label of a selected radio button, style the label element and use the selector to target the adjacent input[type="radio"] when checked.

HTML Markup

<div class="radio-toolbar">
  <label><input type="radio" value="all" checked>All</label>
  <label><input type="radio" value="false">Open</label>
  <label><input type="radio" value="true">Archived</label>
</div>

CSS

.radio-toolbar input[type="radio"] {
  display: none;
}

.radio-toolbar label {
  display: inline-block;
  background-color: #ddd;
  padding: 4px 11px;
  font-family: Arial;
  font-size: 16px;
  cursor: pointer;
}

.radio-toolbar input[type="radio"]:checked + label {
  background-color: #bbb;
}

The above is the detailed content of How Can I Style Selected Radio Button Labels with CSS?. For more information, please follow other related articles on the PHP Chinese website!