Custom Radio Buttons with CSS appearance Property


We use the appearance property to style an element according to the platform-native style of the user’s operating system.

Syntax

The syntax of CSS appearance property is as follows −

Selector {
   appearance: /*value*/;
   -webkit-appearance: /*value*/; /*for Safari and Chrome */
   -moz-appearance: /*value*/; /*for Firefox */
}

Create a Custom Radio Button

To create a custom custom checkbox, we have set the following style with border-radius and appearance. The appearance is set to none −

input[type=radio] {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   padding: 10px;
   background-color: orange;
   border-radius:50%;
}

After the radio button is checked, the background color will change −

input[type=radio]:checked {
   background-color: magenta;
}

The cursor will change when the radio button is hovered −

input[type=radio]:hover {
   cursor: pointer;

Example

The following examples illustrate custom radio button −

<!DOCTYPE html>
<html>
<head>
   <style>
      input[type=radio] {
         appearance: none;
         -webkit-appearance: none;
         -moz-appearance: none;
         padding: 10px;
         background-color: orange;
         border-radius:50%;
      }
      input[type=radio]:checked {
         background-color: magenta;
      }
      input[type=radio]:hover {
         cursor: pointer;
      }
   </style>
</head>
<body>
   <h1>Gender</h1><br/>
   <form>
      <label for="r1">Male</label>
      <input type="radio" id="r1" name="btn" value="v1">
      <input type="radio" id="r2" name="btn" value="v2">
      <label for="r2">Female</label>
   </form>
</body>
</html>

Create an Animated Custom Radio Button

To create an animated custom radio button, we will set the transition effect using the transition property. The transform property is also used. Before selecting any of the radio button, set the following style with transition-duration, property and timing −

input[type=checkbox] {
   appearance: none;
   -moz-appearance: none;
   -webkit-appearance: none;
   border: 3px ridge currentcolor;
   border-radius: 60px;
   box-sizing: content-box;
   color: lightblue;
   height: 60px;
   padding: 2px 2px 2px 2px;
   transition-duration: 280ms;
   transition-property: border-color, color;
   transition-timing-function: ease;
   width: 20px;
}

While and after the checkbox is selected, the following style is set. The direction will change and the color as well −

input[type=checkbox]:checked {
   color: lightgreen;
}
input[type=checkbox]::after {
   background-color: currentcolor;
   border-radius: 10px 10px 10px 10px;
   content: "";
   display: block;
   height: 20px;
   transform: translateY(0px);
   transition: transform 300ms ease-in;
   width: 20px ;
}
input[type=checkbox]:checked::after {
   transform: translateY(40px);
}

Example

The following example illustrate an animated custom radio button −

<!DOCTYPE html>
<html>
<head>
   <style>
      label {
         display: flex;
         align-items: top;
      }
      label input {
         margin: 0px 10px 0px 10px;
      }
      input[type=checkbox] {
         appearance: none;
         -moz-appearance: none;
         -webkit-appearance: none;
         border: 3px ridge currentcolor;
         border-radius: 60px;
         box-sizing: content-box;
         color: lightblue;
         height: 60px;
         padding: 2px 2px 2px 2px;
         transition-duration: 280ms;
         transition-property: border-color, color;
         transition-timing-function: ease;
         width: 20px;
      }
      input[type=checkbox]:checked {
         color: lightgreen;
      }
      input[type=checkbox]::after {
         background-color: currentcolor;
         border-radius: 10px 10px 10px 10px;
         content: "";
         display: block;
         height: 20px;
         transform: translateY(0px);
         transition: transform 300ms ease-in;
         width: 20px ;
      }
      input[type=checkbox]:checked::after {
         transform: translateY(40px);
      }
   </style>
</head>
<body>
   <p>
      Custom radio button example
      <label for="crb">
         Blue
         <input id="crb" type="checkbox"/>
         <br/><br/><br/>Green
      </label>
   </p>
</body>
</html>

Updated on: 01-Nov-2023

799 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements