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
How to create custom checkboxes and radio buttons with CSS?
The design of the default checkboxes and radio buttons can be easily changed with CSS. The initial, selected and hovered properties can also be set for the checkboxes and radio buttons.
Custom checkbox
The following is the code to create a custom checkbox. First, set the containers for the checkboxes. A div container for each checkbox. The checkbox is created using the input type checkbox −
<label class="checkboxContainer">Rice <input type="checkbox" checked="checked"> <span class="checkboxMarked"></span> </label> <label class="checkboxContainer">Flour <input type="checkbox"> <span class="checkboxMarked"></span> </label>
Above, the 1st checkbox is by default checked using the checked attribute −
<input type="checkbox" checked="checked">
Position the container
The position of the checkbox container is set to relative. To arrange the checkboxes properly, use the display property with the value block −
.checkboxContainer {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
The checkbox shape
The tick mark in the checkbox is set using the content property −
.checkboxMarked:after {
content: "";
position: absolute;
display: none;
}
Disable the checkbox text
In a checkbox, you need to also prevent users to select the text. For that, the user-select property is used with the value none −
user-select: none;
The symbol is set like a tick mark and rotated using the transform property with the value rotate() −
.checkboxContainer .checkboxMarked:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
Example
Here is the example −
<!DOCTYPE html>
<html>
<style>
.checkboxContainer {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.checkboxContainer input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkboxMarked {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
.checkboxContainer:hover input ~ .checkboxMarked {
background-color: rgb(205, 255, 199);
}
.checkboxContainer input:checked ~ .checkboxMarked {
background-color: rgb(5, 170, 32);
}
.checkboxMarked:after {
content: "";
position: absolute;
display: none;
}
.checkboxContainer input:checked ~ .checkboxMarked:after {
display: block;
}
.checkboxContainer .checkboxMarked:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
<body>
<h1>Custom Checkbox Example</h1>
<label class="checkboxContainer">Rice
<input type="checkbox" checked="checked">
<span class="checkboxMarked"></span>
</label>
<label class="checkboxContainer">Flour
<input type="checkbox">
<span class="checkboxMarked"></span>
</label>
</body>
</html>
Custom radio button
We can easily change the appearance of a radio button on a web page. The following is the code to create a custom radio button. Let us see the steps.
Set the radio buttons
Use the input type radio to create radio buttons on a web page −
<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>
Remove the default appearance
Disable the default appearance of the radio button easily using the appearance property with the value none −
appearance: none;
The custom checkbox can be created using the appearance and border-radius property. The appearance is set to none initially −
input[type=radio] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 10px;
background-color: orange;
border-radius:50%;
}
The radio button is checked
After the radio button is checked, the background color will change. The :checked selector matches checked <input> radio button −
input[type=radio]:checked {
background-color: magenta;
}
On hover
The cursor will change when the radio button is hovered. The cursor property is set to pointer to make it look like clickable. The :hover selector is used to select an element on hovering the mouse cursor −
input[type=radio]:hover {
cursor: pointer;
}
Example
The following examples illustrate custom radio button −
<!DOCTYPE html>
<html>
<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>
<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>
147 Views
