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

Source Code: (back to article)

Result: Report an issue

<!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>

<!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>