How to Style a Checkbox with CSS
Checkbox is one of the HTML forms used on every website, but mostly they are not styled and look the same. If you want to make your site more attractive to users, you can style your checkboxes. If you don’t know how to do that, now we will create a sample together step by step using only CSS.
Create HTML¶
- Firstly we must have an HTML code, like this:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<section>
<h2>How to style checkbox</h2>
<div class="checkbox-example">
<input type="checkbox" value="1" id="checkboxOneInput"/>
<label for="checkboxOneInput"></label>
</div>
</section>
</body>
</html>Create CSS¶
Now it’s time to start with our CSS code. As we are going to change the styling of the checkboxes, the first thing to do is hiding all the original checkboxes. In order to do that, we must set the visibility property to its “hidden” value:
/**
* Start by hiding the checkboxes
*/
input[type=checkbox] {
visibility: hidden;
}As you can see in our HTML code, we added a label HTML element. When you click on a label with “for” attribute, it checks the checkbox, so we can give a certain style to the label to handle the click events for our checkboxes.
There is also a CSS pseudo class :checked to see when the checkbox is checked:
input[type="checkbox"]:checked {
some code goes here
}We are styling a checkbox like a bar slider, so firstly we need to style the bar. This will be the div element surrounding the checkbox:
/**
* the slider bar
*/
.checkbox-example {
width: 45px;
height: 15px;
background: #555;
margin: 20px 80px;
position: relative;
border-radius: 5px;
}Now we are going to style the label to act as the button on the slider. As it must move from one side of the slider to the other, we can get that effect adding a transition to the label, like this:
/**
* the slider from the label
*/
.checkbox-example label {
display: block;
width: 18px;
height: 18px;
border-radius: 50%;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: -3px;
left: -3px;
background: #ccc;
}Now the slider is in the unchecked position. To move the slider button, we need to know if the checkbox checked. When it is checked, we need to change the left property of the label element:
/**
* Move the slider if the checkbox is clicked
*/
.checkbox-example input[type=checkbox]:checked+label {
left: 27px;
}As you can see in the code above, we use the + combinator to select the label sibling, just next to it.
Now we will combine all these in one code and will have our checkbox ready.
Example of styling a checkbox with CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input[type=checkbox] {
visibility: hidden;
}
.checkbox-example {
width: 45px;
height: 15px;
background: #555;
margin: 20px 10px;
position: relative;
border-radius: 5px;
}
.checkbox-example label {
display: block;
width: 18px;
height: 18px;
border-radius: 50%;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: -3px;
left: -3px;
background: #ccc;
}
.checkbox-example input[type=checkbox]:checked + label {
left: 27px;
}
</style>
</head>
<body>
<h2>How to style checkbox</h2>
<section>
<div class="checkbox-example">
<input type="checkbox" value="1" id="checkboxOneInput" />
<label for="checkboxOneInput"></label>
</div>
</section>
</body>
</html>Example of a styled checkbox:
<!DOCTYPE html>
<html>
<head>
<style>
.main {
display: block;
position: relative;
padding-left: 45px;
margin-bottom: 15px;
cursor: pointer;
font-size: 20px;
}
h1 {
color: orange;
}
/* Hiding the initial checkbox */
input[type=checkbox] {
visibility: hidden;
}
/* Creating a custom checkbox based on demand */
.w3docs {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: black;
}
/* Specify the background color to be shown when hovering over checkbox */
.main:hover input ~ .w3docs {
background-color: gray;
}
/* Specify the background color to be shown when checkbox is active */
.main input:active ~ .w3docs {
background-color: white;
}
/* Specify the background color to be shown when checkbox is checked */
.main input:checked ~ .w3docs {
background-color: orange;
}
/* Checkmark to be shown in checkbox */
/* It is not be shown when not checked */
.w3docs:after {
content: "";
position: absolute;
display: none;
}
/* Display checkmark when checked */
.main input:checked ~ .w3docs:after {
display: block;
}
/* Styling the checkmark using webkit */
/* Rotated the rectangle by 45 degree and
showing only two border to make it look
like a tickmark */
.main .w3docs:after {
left: 8px;
bottom: 5px;
width: 6px;
height: 12px;
border: solid white;
border-width: 0 4px 4px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
</head>
<body>
<h1>
Learn to design and build professional website
</h1>
<label class="main">CodeX
<input type="checkbox">
<span class="w3docs"></span>
</label>
<label class="main">W3Docs
<input type="checkbox" checked="checked">
<span class="w3docs"></span>
</label>
<label class="main">CodeY
<input type="checkbox">
<span class="w3docs"></span>
</label>
</body>
</html>Example of styling a checkbox using CSS properties:
<!DOCTYPE html>
<html>
<head>
<title>Style a checkbox using CSS </title>
<style>
h1 {
color: #8ebf42;
}
.script {
display: block;
position: relative;
padding-left: 45px;
margin-bottom: 15px;
cursor: pointer;
font-size: 20px;
}
/* Hide the default checkbox */
input[type=checkbox] {
visibility: hidden;
}
/* creating a custom checkbox based on demand */
.w3docs {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: black;
}
/* specify the background color to be shown when hovering over checkbox */
.script:hover input ~ .w3docs {
background-color: orange;
}
/* specify the background color to be shown when checkbox is active */
.script input:active ~ .w3docs {
background-color: red;
}
/* specify the background color to be shown when checkbox is checked */
.script input:checked ~ .w3docs {
background-color: black;
}
/* checkmark to be shown in checkbox */
/* It is not be shown when not checked */
.w3docs:after {
content: "";
position: absolute;
display: none;
}
/* display checkmark when checked */
.script input:checked ~ .w3docs:after {
display: block;
}
/* styling the checkmark using webkit */
/* creating a square to be the sign of checkmark */
.script .w3docs:after {
left: 6px;
bottom: 5px;
width: 6px;
height: 6px;
border: solid white;
border-width: 4px 4px 4px 4px;
}
</style>
</head>
<body>
<h1>Do you like W3Docs?</h1>
<label class="script" style="color:black;">
Yes
<input type="checkbox">
<span class="w3docs"></span>
</label>
<label class="script" style="color:black;">
Yes Of course
<input type="checkbox" checked="checked">
<span class="w3docs"></span>
</label>
</body>
</html>