Custom Radio Buttons using only HTML & CSS

Hello readers, Today in this blog you will learn how to create Custom Radio Buttons using only HTML and CSS.

A radio button or option button is one type of selection indicator or button that allows the user to choose only one option in a form list. In the radio button, if an option is selected, the circle is filled to inform the user, that option is selected.

In this program [Custom Radio Buttons], there are two options on the webpage labeled as Male and Female. The Male option is selected by default and when you select the second option, the background color of this option will be changed and a circle is filled with animation as you can see in the image.

To make these buttons, I used HTML <input type=”radio”> and <label> tags. You can also use the radio tag only to create a custom radio button but I used a label tag to control the radio button on text or label click.

If you want to control the <input type=”radio”> with <label> then you need to pass the id name of radio tag inside for attribute of the label tag like this <input type=”radio” name=”select” id=”option-1″> and <label for=”option-1″></label>. You’re thinking about why I used the name attribute in the radio tag, if you want, the user can select only one option in a form then this name attribute value must be the same as all other radio tags.

Custom Radio Buttons [Source Code] :

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Custom Radio Button</title>
    <style>
      @import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Poppins", sans-serif;
      }
      html,
      body {
        display: grid;
        height: 100%;
        place-items: center;
        background: #fff;
      }
      .wrapper {
        display: inline-flex;
        background: #fff;
        height: 100px;
        width: 400px;
        align-items: center;
        justify-content: space-evenly;
        border-radius: 5px;
        padding: 20px 15px;
        box-shadow: 10px 13px 25px rgba(0, 0, 0, 0.3);
      }
      .wrapper .option {
        background: #fff;
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        margin: 0 10px;
        border-radius: 5px;
        cursor: pointer;
        padding: 0 10px;
        border: 2px solid lightgrey;
        transition: all 0.3s ease;
      }
      .wrapper .option .dot {
        height: 20px;
        width: 20px;
        background: #d9d9d9;
        border-radius: 50%;
        position: relative;
      }
      .wrapper .option .dot::before {
        position: absolute;
        content: "";
        top: 3px;
        left: 2.5px;
        width: 14px;
        height: 14px;
        background: #0069d9;
        border-radius: 50%;
        opacity: 0;
        transform: scale(2);
        transition: all 0.1s ease;
      }
      input[type="radio"] {
        display: none;
      }
      #option-1:checked:checked ~ .option-1,
      #option-2:checked:checked ~ .option-2 {
        border-color: #0069d9;
        background: #0069d9;
      }
      #option-1:checked:checked ~ .option-1 .dot,
      #option-2:checked:checked ~ .option-2 .dot {
        background: #fff;
      }
      #option-1:checked:checked ~ .option-1 .dot::before,
      #option-2:checked:checked ~ .option-2 .dot::before {
        opacity: 1;
        transform: scale(1);
      }
      .wrapper .option span {
        font-size: 20px;
        color: #808080;
      }
      #option-1:checked:checked ~ .option-1 span,
      #option-2:checked:checked ~ .option-2 span {
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <input type="radio" name="select" id="option-1" checked />
      <input type="radio" name="select" id="option-2" />
      <label for="option-1" class="option option-1">
        <div class="dot"></div>
        <span>Male</span>
      </label>
      <label for="option-2" class="option option-2">
        <div class="dot"></div>
        <span>Female</span>
      </label>
    </div>
  </body>
</html>

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Custom Radio Button</title>
    <style>
      @import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Poppins", sans-serif;
      }
      html,
      body {
        display: grid;
        height: 100%;
        place-items: center;
        background: #fff;
      }
      .wrapper {
        display: inline-flex;
        background: #fff;
        height: 100px;
        width: 400px;
        align-items: center;
        justify-content: space-evenly;
        border-radius: 5px;
        padding: 20px 15px;
        box-shadow: 10px 13px 25px rgba(0, 0, 0, 0.3);
      }
      .wrapper .option {
        background: #fff;
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        margin: 0 10px;
        border-radius: 5px;
        cursor: pointer;
        padding: 0 10px;
        border: 2px solid lightgrey;
        transition: all 0.3s ease;
      }
      .wrapper .option .dot {
        height: 20px;
        width: 20px;
        background: #d9d9d9;
        border-radius: 50%;
        position: relative;
      }
      .wrapper .option .dot::before {
        position: absolute;
        content: "";
        top: 3px;
        left: 2.5px;
        width: 14px;
        height: 14px;
        background: #0069d9;
        border-radius: 50%;
        opacity: 0;
        transform: scale(2);
        transition: all 0.1s ease;
      }
      input[type="radio"] {
        display: none;
      }
      #option-1:checked:checked ~ .option-1,
      #option-2:checked:checked ~ .option-2 {
        border-color: #0069d9;
        background: #0069d9;
      }
      #option-1:checked:checked ~ .option-1 .dot,
      #option-2:checked:checked ~ .option-2 .dot {
        background: #fff;
      }
      #option-1:checked:checked ~ .option-1 .dot::before,
      #option-2:checked:checked ~ .option-2 .dot::before {
        opacity: 1;
        transform: scale(1);
      }
      .wrapper .option span {
        font-size: 20px;
        color: #808080;
      }
      #option-1:checked:checked ~ .option-1 span,
      #option-2:checked:checked ~ .option-2 span {
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <input type="radio" name="select" id="option-1" checked />
      <input type="radio" name="select" id="option-2" />
      <label for="option-1" class="option option-1">
        <div class="dot"></div>
        <span>Male</span>
      </label>
      <label for="option-2" class="option option-2">
        <div class="dot"></div>
        <span>Female</span>
      </label>
    </div>

  </body>
</html>

Custom Radio Buttons using only HTML & CSS

Post a Comment

Contact Form