How to style a checkbox using CSS ?
Last Updated :
11 Jul, 2025
Improve
Styling a checkbox using CSS involves customizing its appearance beyond the default browser styles. This can include changing the size, color, background, and border, and adding custom icons or animations. Techniques often involve hiding the default checkbox and styling a label or pseudo-elements for customization.
Table of Content
Using Pseudo-elements
To style checkboxes using pseudo-elements, target the input[type="checkbox"] element and apply styles to ::before or ::after pseudo-elements. This technique allows for custom designs using CSS properties like content, background, border, and size.
Example: In the example, a container div wraps content. Checkboxes are hidden with custom styles using pseudo-elements for various states. A span wraps each checkbox for custom styling, with a checkmark created using ::after.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
display: flex;
justify-content: center;
}
h1 {
color: green;
}
.root{
padding: 20px;
}
.main {
display: block;
position: relative;
padding-left: 45px;
margin-bottom: 15px;
cursor: pointer;
font-size: 20px;
}
.main input[type=checkbox] {
visibility: hidden;
}
.checkbox-container {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: transparent;
border: 2px solid #000;
}
/* Hover effect */
.main:hover input~.checkbox-container {
background-color: yellow;
}
/* Active effect */
.main input:active~.checkbox-container {
background-color: red;
}
/* Checked effect */
.main input:checked~.checkbox-container {
background-color: green;
}
/* Checkmark */
.checkbox-container::after {
content: "";
position: absolute;
display: none;
left: 7px;
top: 3px;
width: 6px;
height: 12px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* Display checkmark when checked */
.main input:checked~.checkbox-container::after {
display: block;
}
</style>
</head>
<body>
<div class="root">
<h1>Best Computer Science Platform</h1>
<label class="main">CodeX
<input type="checkbox">
<span class="checkbox-container"></span>
</label>
<label class="main">GeeksforGeeks
<input type="checkbox" checked="checked">
<span class="checkbox-container"></span>
</label>
<label class="main">CodeY
<input type="checkbox">
<span class="checkbox-container"></span>
</label>
</div>
</body>
</html>
<html><head> <style> body { font-family: Arial, sans-serif; margin: 0; display: flex; justify-content: center; } h1 { color: green; } .root{ padding: 20px; } .main { display: block; position: relative; padding-left: 45px; margin-bottom: 15px; cursor: pointer; font-size: 20px; } .main input[type=checkbox] { visibility: hidden; } .checkbox-container { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: transparent; border: 2px solid #000; } /* Hover effect */ .main:hover input~.checkbox-container { background-color: yellow; } /* Active effect */ .main input:active~.checkbox-container { background-color: red; } /* Checked effect */ .main input:checked~.checkbox-container { background-color: green; } /* Checkmark */ .checkbox-container::after { content: ""; position: absolute; display: none; left: 7px; top: 3px; width: 6px; height: 12px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* Display checkmark when checked */ .main input:checked~.checkbox-container::after { display: block; } </style></head><body> <div class="root"> <h1>Best Computer Science Platform</h1> <label class="main">CodeX <input type="checkbox"> <span class="checkbox-container"></span> </label> <label class="main">GeeksforGeeks <input type="checkbox" checked="checked"> <span class="checkbox-container"></span> </label> <label class="main">CodeY <input type="checkbox"> <span class="checkbox-container"></span> </label> </div> </body></html>Output:
Using Custom Design with CSS
In this approach, custom checkbox designs are created using CSS. Default checkboxes are hidden, and pseudo-elements are used to create custom checkbox styles, including hover, active, and checked states, enhancing the visual appearance and user interaction.
Example: In this example, checkboxes are styled with custom CSS to replace default appearance. Hovering or clicking changes colors, checked boxes show a green background, and a pseudo-element checkmark appears when selected.
<!DOCTYPE html>
<html>
<head>
<title>
Style a checkbox using CSS
</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
}
h1 {
color: green;
}
.script {
display: block;
position: relative;
padding-left: 45px;
margin-bottom: 15px;
cursor: pointer;
font-size: 20px;
}
.script input[type=checkbox] {
visibility: hidden;
}
.geekmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: green;
}
.script:hover input~.geekmark {
background-color: yellow;
}
.script input:active~.geekmark {
background-color: red;
}
.script input:checked~.geekmark {
background-color: green;
}
.geekmark:after {
content: "";
position: absolute;
display: none;
}
.script input:checked~.geekmark:after {
display: block;
}
.script .geekmark:after {
left: 6px;
bottom: 5px;
width: 6px;
height: 6px;
border: solid white;
border-width: 4px 4px 4px 4px;
}
</style>
</head>
<body>
<h1>Is GeeksforGeeks Useful?</h1>
<label class="script">
Yes
<input type="checkbox">
<span class="geekmark"></span>
</label>
<label class="script">
Absolutely Yes
<input type="checkbox" checked="checked">
<span class="geekmark"></span>
</label>
</body>
</html>
<html><head> <title> Style a checkbox using CSS </title> <style> body { font-family: Arial, sans-serif; margin: 0; } h1 { color: green; } .script { display: block; position: relative; padding-left: 45px; margin-bottom: 15px; cursor: pointer; font-size: 20px; } .script input[type=checkbox] { visibility: hidden; } .geekmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: green; } .script:hover input~.geekmark { background-color: yellow; } .script input:active~.geekmark { background-color: red; } .script input:checked~.geekmark { background-color: green; } .geekmark:after { content: ""; position: absolute; display: none; } .script input:checked~.geekmark:after { display: block; } .script .geekmark:after { left: 6px; bottom: 5px; width: 6px; height: 6px; border: solid white; border-width: 4px 4px 4px 4px; } </style></head><body> <h1>Is GeeksforGeeks Useful?</h1> <label class="script"> Yes <input type="checkbox"> <span class="geekmark"></span> </label> <label class="script"> Absolutely Yes <input type="checkbox" checked="checked"> <span class="geekmark"></span> </label></body></html>Output:
How to style a checkbox using CSS ?
