The checkbox is an HTML element used to take input from the user. It is hard to style the checkbox, but pseudo-elements makes it easier to style a checkbox.
This HTML element is generally used on every website, but without styling them, they look similar on every website. So, styling them will make our site different and attractive. We have to hide the original checkbox to style the checkbox. Styling the checkboxes using CSS is an interesting and creative task, providing a new and attractive look to the default checkbox.
Examples of CSS checkbox style
Illustrations can help in clearly understanding how to style checkboxes. Let's explore a few examples to demonstrate this concept.
Example1
In this instance, we are employing the ' ~ ' symbol, known as the sibling combinator, to target elements that come after a specific selector. Additionally, we have applied the :hover pseudo-class to customize the appearance of the checkbox when a user hovers their cursor over it.
Code:
Example
<!DOCTYPE html>
<html>
<style>
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 20px;
cursor: pointer;
font-size: 25px;
}
/* Hide the default checkbox */
.container input {
visibility: hidden;
cursor: pointer;
}
/* Create a custom checkbox */
.mark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: lightgray;
}
.container:hover input ~ .mark {
background-color: gray;
}
.container input:checked ~ .mark {
background-color: blue;
}
/* Create the mark/indicator (hidden when not checked) */
.mark:after {
content: "";
position: absolute;
display: none;
}
/* Show the mark when checked */
.container input:checked ~ .mark:after {
display: block;
}
/* Style the mark/indicator */
.container .mark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
</style>
<body>
<h1>Qualification</h1>
<label class="container">MCA
<input type="checkbox">
<span class="mark"></span>
</label>
<label class="container">BCA
<input type="checkbox">
<span class="mark"></span>
</label>
<label class="container">12th
<input type="checkbox">
<span class="mark"></span>
</label>
<label class="container">10th
<input type="checkbox" checked="check">
<span class="mark"></span>
</label>
</body>
</html>
Output:
Example2
Now, let's explore a different illustration of customizing the checkbox. Within this instance, we will observe the ripple impact, enhancing the visual appeal of the checkbox. This feature introduces a fresh appearance to the checkbox. Similar to the previous illustration, we have implemented the '~' sibling combinator, which identifies all elements that come before the initial selector. Additionally, we incorporate pseudo-classes like :checked, :before, :after, and more.
Refer to the following instance to generate the ripple impact within the checkbox using CSS.
Code:
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: block;
position: relative;
padding-left: 45px;
margin-bottom: 15px;
cursor: pointer;
font-size: 20px;
}
/* Hide the original checkbox */
input[type=checkbox] {
visibility: hidden;
}
/* creating a custom checkbox*/
.mark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: lightgray;
}
/*background color to be shown when hovering over checkbox */
.container:hover input ~ .mark {
background-color: gray;
}
/*background color to be shown when the checkbox is checked */
.container input:checked ~ .mark {
background-color: blue;
}
/* checkmark to be shown in checkbox */
/* It will not be shown when unchecked */
.mark:after {
content: "";
position: absolute;
display: none;
}
/* display checkmark when checked */
.container input:checked ~ .mark:after {
display: block;
}
/* creating a square to be the sign of
checkmark */
.container .mark:after {
left: 6px;
bottom: 6px;
width: 6px;
height: 6px;
border: solid white;
border-width: 4px 4px 4px 4px;
}
</style>
</head>
<body>
<h1>Qualification</h1>
<label class="container">
MCA
<input type="checkbox">
<span class="mark"></span>
</label>
<label class="container">
BCA
<input type="checkbox">
<span class="mark"></span>
</label>
<label class="container">
12th
<input type="checkbox">
<span class="mark"></span>
</label>
<label class="container">
10th
<input type="checkbox" checked="check">
<span class="mark"></span>
</label>
</body>
</html>
Output:
When selecting the checkbox, a ripple effect is displayed.
Example 3
We will explore the subsequent example demonstrating how to generate a filled square checkbox design using CSS.
Code:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Filled Square Checkboxes</title>
<style>
:root {
--color-one: #6c1ea0;
--color-two: #c3a2d8;
--color-three: #f0b684;
--color-accent: #eaea40;
--color-text: #e9e93f;
--color-bg: #837df1;
--font-family-headings: "Inter", sans-serif;
--font-family: sans-serif;
}
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
display: grid;
height: 100%;
place-content: center;
color: var(--color-text);
background: var(--color-bg);
}
.checkboxes {
display: inline-flex;
color: var(--color-text);
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
line-height: 1;
align-items: center;
border-radius: 4px;
background-color: rgb(58, 47, 47);
padding: 4px 9px 6px 9px;
@media (min-width: 820px) {
font-size: 1.15rem;
}
span {
display: flex;
align-items: center;
position: relative;
}
input[type="checkbox"] {
clip: rect(2px, 2px, 2px, 2px);
padding: 0;
width: 1px;
height: 1px;
border: 0;
position: absolute;
overflow: hidden;
&:checked + span::after {
background-color: var(--color-accent);
}
&:checked + span {
color: var(--color-accent);
}
&:focus + span::before {
border-color: var(--color-accent);
}
&:disabled {
opacity: .54;
& + span {
color: rgb(211, 211, 164);
}
}
}
span::before {
content: "";
display: inline-block;
border-radius: 4px;
margin-right: 9px;
background-color: #414051;
border: 1px solid transparent;
height: 18px;
width: 18px;
}
input[type="checkbox"] {
}
span::after {
content: "";
width: 14px;
height: 14px;
position: absolute;
display: inline-block;
border-radius: 4px;
background-color: transparent;
left: 2px;
}
}
</style>
</head>
<body>
<div>
<h1>Select your favorite ice-cream</h1>
<label class="checkboxes box-1">
<input type="checkbox" checked>
<span>Chocolate Ice-cream</span>
</label>
<label class="checkboxes box-2">
<input type="checkbox">
<span>Butterscotch Ice-cream</span>
</label>
<label class="checkboxes box-3">
<input type="checkbox" disabled>
<span>Mango Ice-cream</span>
</label>
</div>
</body>
</html>
Output:
Example 4:
We will be developing a slider checkbox in this instance.
Code:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Slider Checkbox Style</title>
<style>
.checkbox-wrapper {
--slider-height: 11px;
--slider-width: calc(var(--slider-height) * 5);
--switch-height: calc(var(--slider-height) * 3);
--switch-width: var(--switch-height);
--switch-shift: var(--slider-height);
--transition: all 0.2s ease;
--switch-on-color: #d1658e;
--slider-on-color: #da5387;
--switch-off-color: #bab4b4;
--slider-off-color: #9f9898;
}
.checkbox-wrapper .switch {
display: block;
}
.checkbox-wrapper .switch .slider {
position: relative;
display: inline-block;
height: var(--slider-height);
width: var(--slider-width);
border-radius: var(--slider-height);
cursor: pointer;
background: var(--slider-off-color);
transition: var(--transition);
}
.checkbox-wrapper .switch .slider:after {
background: var(--switch-off-color);
position: absolute;
left: calc(-1 * var(--switch-shift));
top: calc((var(--slider-height) - var(--switch-height)) / 2);
border-radius: 50%;
box-shadow: 0px 3px 3px rgba(52, 47, 47, 0.2);
content: '';
display: block;
height: var(--switch-width);
width: var(--switch-height);
transition: var(--transition);
}
.checkbox-wrapper .switch label {
margin-right: 8px;
}
.checkbox-wrapper .switch .input {
display: none;
}
.checkbox-wrapper .switch .input ~ .label {
margin-left: var(--slider-height);
}
.checkbox-wrapper .switch .input:checked ~ .slider:after {
left: calc(var(--slider-width) - var(--switch-width) + var(--switch-shift));
}
.checkbox-wrapper .switch .input:checked ~ .slider {
background: var(--slider-on-color);
}
.checkbox-wrapper .switch .input:checked ~ .slider:after {
background: var(--switch-on-color);
}
</style>
</head>
<body>
<h1>Checkbox Style Slide</h1>
<div class="checkbox-wrapper">
<div class="switch">
<input id="slide" class="input" type="checkbox" />
<label for="slide" class="slider"></label>
</div>
</div>
</body>
</html>
Output:
The output shows a slider checkbox.
Example 5:
We are going to generate a checkmark inside the circular checkbox in this instance.
Code:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tick mark in the circle checkbox</title>
<style>
.checkbox-wrapper * {
-webkit-tap-highlight-color: transparent;
outline: none;
}
.checkbox-wrapper input[type="checkbox"] {
display: none;
}
.checkbox-wrapper label {
--size: 45px;
--shadow: calc(var(--size) * .07) calc(var(--size) * .1);
position: relative;
display: block;
height: var(--size);
width: var(--size);
border-radius: 50%;
box-shadow: 0 var(--shadow) rgb(98, 239, 63);
margin: 0 auto;
background-color: rgb(228, 247, 20);
cursor: pointer;
transition: 0.3s ease transform, 0.3s ease background-color,
0.2s ease box-shadow;
overflow: hidden;
z-index: 1;
}
.checkbox-wrapper label:before {
content: "";
position: absolute;
right: 0;
top: 50%;
left: 0;
height: calc(var(--size) * .7);
width: calc(var(--size) * .7);
margin: 0 auto;
border-radius: 50%;
background-color: white;
transform: translateY(-50%);
box-shadow: inset 0 var(--shadow) rgb(98, 239, 63);
transition: 0.2s ease width, 0.2s ease height;
}
.checkbox-wrapper label:hover:before {
height: calc(var(--size) * .55);
width: calc(var(--size) * .55);
box-shadow: inset 0 var(--shadow) rgb(98, 239, 63);
}
.checkbox-wrapper label:active {
transform: scale(0.91);
}
.checkbox-wrapper .tick {
position: absolute;
top: -1px;
left: calc(var(--size) * -.05);
right: 0;
height: calc(var(--size) * .6);
width: calc(var(--size) * .6);
margin: 0 auto;
margin-left: calc(var(--size) * .14);
transform: rotateZ(-40deg);
}
.checkbox-wrapper .tick:before,
.checkbox-wrapper .tick:after {
content: "";
opacity: 0;
background-color: white;
border-radius: 2px;
position: absolute;
transition: 0.2s ease transform, 0.2s ease opacity;
}
.checkbox-wrapper .tick:before {
left: 0;
bottom: 0;
box-shadow: -2px 0 4px rgba(0, 0, 0, 0.36);
height: calc(var(--size) * .3);
width: calc(var(--size) * .1);
transform: translateY(calc(var(--size) * -.60));
}
.checkbox-wrapper .tick:after {
left: 0;
bottom: 0;
height: calc(var(--size) * .1);
width: 100%;
box-shadow: 0 3px 5px rgba(177, 10, 10, 0.25);
transform: translateX(calc(var(--size) * .65));
}
.checkbox-wrapper input[type="checkbox"]:checked + label {
box-shadow: 0 var(--shadow) #9ad29d;
background-color: #077e0d;
}
.checkbox-wrapper input[type="checkbox"]:checked + label:before {
height: 0;
width: 0;
}
.checkbox-wrapper input[type="checkbox"]:checked + label .tick:before,
.checkbox-wrapper input[type="checkbox"]:checked + label .tick:after {
opacity: 1;
transform: translate(0);
}
</style>
</head>
<body>
<center>
<h1>Tick mark in the circle checkbox</h1>
</center>
<div class="checkbox-wrapper">
<input type="checkbox" id="checkbox">
<label for="checkbox">
<div class="tick"></div>
</label>
</div>
</body>
</html>
Output:
The result displays a checkmark inside the circular checkbox.
Example 6:
In this instance, we will create a toggle checkbox with options for "Yes" or "No".
Code:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Switch Checkbox</title>
<style>
.checkbox-wrapper input[type="checkbox"] {
visibility: hidden;
display: none;
}
.checkbox-wrapper *,
.checkbox-wrapper ::after,
.checkbox-wrapper ::before {
box-sizing: border-box;
}
.checkbox-wrapper .yes-no {
display: inline-block;
font-size: 2em;
text-align: center;
font-weight: bold;
overflow: hidden;
position: relative;
text-transform: uppercase;
color: #727272;
height: 4em;
width: 7em;
border-bottom: 0.5em solid rgb(211, 205, 205);
}
.checkbox-wrapper .yes-no-small {
font-size: 0.75em;
}
.checkbox-wrapper .yes-no::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0.5em;
background-color: #b4b1b1;
border: 0.5em solid rgb(211, 205, 205);
border-bottom: 0;
}
.checkbox-wrapper .switch-left,
.checkbox-wrapper .switch-right {
cursor: pointer;
align-items: center;
display: flex;
user-select: none;
position: absolute;
width: 3em;
height: 2.5em;
justify-content: center;
transition: 0.2s;
}
.checkbox-wrapper .switch-left {
width: 2.75em;
left: 0.85em;
height: 2.4em;
bottom: 0.4em;
background-color: #f1ecec;
transform: rotate(15deg) skewX(15deg);
}
.checkbox-wrapper .switch-right {
bottom: 0;
right: 0.5em;
background-color: rgb(224, 122, 21);
color: white;
}
.checkbox-wrapper .switch-left::before,
.checkbox-wrapper .switch-right::before {
content: "";
position: absolute;
background-color: #dbdbdb;
height: 2.45em;
bottom: -0.45em;
width: 0.4em;
transform: skewY(-65deg);
}
.checkbox-wrapper .switch-left::before {
left: -0.4em;
}
.checkbox-wrapper .switch-right::before {
background-color: transparent;
right: -0.375em;
transform: skewY(65deg);
}
.checkbox-wrapper input:checked + .switch-left {
color: white;
background-color: #00d00e;
width: 3em;
left: 0.5em;
bottom: 0px;
height: 2.5em;
transform: rotate(0deg) skewX(0deg);
}
.checkbox-wrapper input:checked + .switch-left::before {
background-color: transparent;
width: 3.0833em;
}
.checkbox-wrapper input:checked + .switch-left + .switch-right {
background-color: #f1ecec;
color: #727272;
height: 2.4em;
right: 0.8em;
bottom: 0.4em;
width: 2.75em;
transform: rotate(-15deg) skewX(-15deg);
}
.checkbox-wrapper input:checked + .switch-left + .switch-right::before {
background-color: #dbdbdb;
}
.checkbox-wrapper input:focus + .switch-left {
color: rgb(108, 27, 27);
}
.checkbox-wrapper input:checked:focus + .switch-left {
color: white;
}
.checkbox-wrapper input:focus + .switch-left + .switch-right {
color: white;
}
.checkbox-wrapper input:checked:focus + .switch-left + .switch-right {
color: rgb(108, 27, 27);
}
</style>
</head>
<body>
<h1>Switch Checkbox</h1>
<div class="checkbox-wrapper">
<label class="yes-no yes-no-small">
<input type="checkbox">
<span class="switch-left">Yes</span>
<span class="switch-right">No</span>
</label>
</body>
</html>
Output:
The result displays a toggle switch checkbox with options for selecting either "Yes" or "No".
Conclusion
We have explored the CSS checkbox design in this guide. We have acquired knowledge on customizing checkboxes like placing checkmarks in square checkboxes, adding ripple effects to checkboxes, incorporating checkmarks in circular checkboxes, implementing switch-style checkboxes, and designing slider checkboxes. By utilizing CSS, we have the ability to craft additional unique checkboxes.