Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Custom Checkbox with CSS appearance Property
The CSS appearance property is used to control how form elements display according to the operating system's native styling. When set to none, it removes default styling, allowing you to create completely custom checkboxes with unique designs.
Syntax
selector {
appearance: value;
}
Possible Values
| Value | Description |
|---|---|
none |
Removes all platform-native styling |
auto |
Uses the default platform styling (default value) |
Method 1: Round Custom Checkbox
The following example creates a round custom checkbox using appearance: none and border-radius: 50% −
<!DOCTYPE html>
<html>
<head>
<style>
input[type="checkbox"] {
appearance: none;
width: 30px;
height: 30px;
background-color: #e0f7fa;
border: 2px solid #00bcd4;
border-radius: 50%;
position: relative;
cursor: pointer;
margin-right: 10px;
}
input[type="checkbox"]:checked {
background-color: #00bcd4;
}
input[type="checkbox"]:checked::after {
content: "?";
color: white;
font-size: 18px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.checkbox-label {
display: inline-flex;
align-items: center;
margin: 10px 0;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h2>Education</h2>
<p>Select your degree(s):</p>
<label class="checkbox-label">
<input type="checkbox"> MCA
</label><br>
<label class="checkbox-label">
<input type="checkbox"> BCA
</label>
</body>
</html>
Round checkboxes with light blue background and dark blue border appear. When checked, they turn dark blue with a white checkmark centered inside the circle.
Method 2: Rectangular Custom Checkbox
The following example creates a rectangular custom checkbox with rounded corners −
<!DOCTYPE html>
<html>
<head>
<style>
input[type="checkbox"] {
appearance: none;
width: 25px;
height: 25px;
background-color: #f3e5f5;
border: 2px solid #9c27b0;
border-radius: 4px;
position: relative;
cursor: pointer;
margin-right: 10px;
}
input[type="checkbox"]:checked {
background-color: #9c27b0;
}
input[type="checkbox"]:checked::before {
content: "\2713";
color: white;
font-size: 16px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hobby-label {
display: inline-flex;
align-items: center;
margin: 8px 0;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h2>Hobbies</h2>
<p>Select your hobbies:</p>
<label class="hobby-label">
<input type="checkbox"> Playing Cricket
</label><br>
<label class="hobby-label">
<input type="checkbox"> Watching Movies
</label><br>
<label class="hobby-label">
<input type="checkbox"> Gardening
</label>
</body>
</html>
Rectangular checkboxes with light purple background and purple border appear. When checked, they turn purple with a white checkmark symbol centered inside the rectangle.
Key Points
- Always use
appearance: noneto remove default checkbox styling - Set explicit
widthandheightfor consistent sizing - Use
::afteror::beforepseudo-elements to add checkmarks - Position pseudo-elements with
absolutepositioning for precise control
Conclusion
The appearance property with value none allows complete customization of checkboxes. Combined with CSS styling and pseudo-elements, you can create visually appealing custom checkboxes that match your design requirements.
Updated on: 2026-03-15T15:19:31+05:30
2K+ Views
Advertisements