Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Custom Checkbox 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. The custom checkbox looks different from the default checkbox, and after selecting it the appearance will change.
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 Round Custom Checkbox
To create a round custom checkbox, we have set the following style with border-radius and box-shadow. The appearance is set to none −
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%;
}
After the checkbox is checked, we have changed the appearance with a different background color, border and box-shadow −
input[type=checkbox]:checked {
background-color: coral;
border: 6px solid cornflowerblue;
box-shadow: 0 1px 2px lightorange;
}
Example
Let us see an example to create a round custom checkbox −
<!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>
<h1>Education</h1>
<p>Select the degree(s):</p>
<input type="checkbox"> MCA
<input type="checkbox"> BCA
</body>
</html>
Create a Rectangular Custom Checkbox
To create a rectangular custom checkbox, we have set the following style with border-radius and box-shadow. The appearance is set to none −
input[type=checkbox] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 10px;
background-color: cyan;
border-radius:5%;
}
After the checkbox is checked, we have changed the appearance −
input[type=checkbox]:checked {
background-color: magenta;
}
We have set the checkbox after it is selected with the following HTML Unicode Character −
content:"\2713";
Example
Let us see an example to create a round custom checkbox −
<!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>
<h1>Hobbies</h1>
<p>Select your hobbies:</p>
<input type="checkbox"> Playing Cricket
<input type="checkbox"> Watching Movies
<input type="checkbox"> Gardening
</body>
</html>
1K+ Views
