How to Style the Selected Label of a Radio Button

Solution with the CSS :checked pseudo-class

First of all, you need to hide the initial circular buttons by setting the CSS display property to "none". Then, style the labels in the way you want them to be by default when they aren’t selected. In our example, we set the display of our labels to "inline-block" and then continue styling by setting the background-color, padding, font-family, font-size, and cursor properties.

After that, you can style the selected <label> element differently. Use the CSS :checked pseudo-class and the adjacent sibling selector (+). This will apply to any label that directly follows a checked radio button.

Example of styling a selected label of the radio button:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .radio-button input[type="radio"] {
        display: none;
      }      
      .radio-button label {
        display: inline-block;
        background-color: #d1d1d1;
        padding: 4px 11px;
        font-family: Arial;
        font-size: 18px;
        cursor: pointer;
      }      
      .radio-button input[type="radio"]:checked+label {
        background-color: #76cf9f;
      }
    </style>
  </head>
  <body>
    <div class="radio-button">
      <input type="radio" id="radio1" name="radios" value="all" checked>
      <label for="radio1">Books</label>
      <input type="radio" id="radio2" name="radios" value="false">
      <label for="radio2">Snippets</label>
      <input type="radio" id="radio3" name="radios" value="true">
      <label for="radio3">Quizzes</label>
    </div>
  </body>
</html>

Result

In our next example, we add a margin to the "radio-button" class, then hide the circular buttons but differently from the previous example. For that, we set the opacity and width properties to 0, and use the "fixed" value of the position property.

For accessibility reasons, we change the appearance when a button gets focus, thus making the focused border dashed. This technique will also allow changing selection with the left and right arrows. We also add a hover effect with the CSS :hover pseudo-class so that when you hover over other options, they change the appearance.

Example of styling a selected label of the radio button with a hover effect:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .radio-button {
        margin: 15px;
      }
      .radio-button input[type="radio"] {
        opacity: 0;
        position: fixed;
        width: 0;
      }
      .radio-button label {
        display: inline-block;
        background-color: #d1d1d1;
        padding: 10px 20px;
        font-family: sans-serif, Arial;
        font-size: 16px;
        border: 1px solid #666;
        border-radius: 4px;
      }
      .radio-button label:hover {
        background-color: #b1e3c1;
      }
      .radio-button input[type="radio"]:focus + label {
        border: 2px dashed #666;
      }
      .radio-button input[type="radio"]:checked + label {
        background-color: #76cf9f;
        border-color: #666;
      }
    </style>
  </head>
  <body>
    <div class="radio-button">
      <input type="radio" id="radio1" name="radios" value="all" checked>
      <label for="radio1">Books</label>
      <input type="radio" id="radio2" name="radios" value="false">
      <label for="radio2">Snippets</label>
      <input type="radio" id="radio3" name="radios" value="true">
      <label for="radio3">Quizzes</label>
    </div>
  </body>
</html>