How to Style a Selected Radio Buttons Label in CSS

In order to apply a CSS style to a label of a checked radio button or a checked checkbox, you can use the :checked CSS pseudo-class selector with the adjacent sibling combinator(+.)This can be achieved by following the procedure below:

.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;
<div class="radio-toolbar">
  <input type="radio" id="radio1" name="radios" value="all" checked>
  <label for="radio1">All</label>

  <input type="radio" id="radio2" name="radios" value="false">
  <label for="radio2">Open</label>

  <input type="radio" id="radio3" name="radios" value="true">
  <label for="radio3">Archived</label>