Custom Checkbox with CSS appearance Property

CSS Web Development Front End Technology

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 */
}

Example

The following examples illustrate CSS appearance property.

Live Demo

<!DOCTYPE html>
<html>
   <style>
      input[type=checkbox] {
         appearance: none;
         -webkit-appearance: none;
         -moz-appearance: none;
         padding: 12px;
         background-color: cyan;
         box-shadow: inset 0 3px 3px 5px lightgreen;
         border-radius:50%;
      }
      input[type=checkbox]:checked {
         background-color: coral;
         border: 6px solid cornflowerblue;
         box-shadow: 0 1px 2px lightorange;
      }
      input[type=checkbox]:checked:after {
         content:"Checked";
      }
   </style>
<body>
   <input type="checkbox"> Custom Checkbox Example
</body>
</html>

This gives the following output

Example

Live Demo

<!DOCTYPE html>
<html>
   <style>
      input[type=checkbox] {
         appearance: none;
         -webkit-appearance: none;
         -moz-appearance: none;
         padding: 10px;
         background-color: cyan;
         border-radius:5%;
      }
      input[type=checkbox]:checked {
         background-color: magenta;
      }
      input[type=checkbox]:checked:before {
         content:"\2713";
         color: white;
         padding: initial;
         font-weight: bold;
      }
   </style>
<body>
   <input type="checkbox"> Another Custom Checkbox Example
</body>
</html>

This gives the following output