You can style the check box using the default styling(browser’s default style).
CSS(Cascading Style Sheet) is used to style the checkboxes. When you are styling the form elements like checkboxes and radio buttons, you can choose two different styles, such as default styling or custom styling(where you can design your own style). We will discuss these methods in this blog in detail.
Table of Contents:
Methods to Style a Checkbox Using CSS
CSS properties are used to style the checkboxes. Let’s discuss these properties in detail.
Method 1: Default Checkbox Styling
By default, the checkbox gets styled on its own. There are a few aspects you can adjust, such as some of its properties, but this doesn’t allow you to customize the features of checkboxes.
Example:y
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Default Checkbox</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Default Checkbox</h1>
<form>
<input type="checkbox" id="checkbox1">
<label for="checkbox1">Check</label>
</form>
</body>
</html>
CSS
input[type="checkbox"] {
width: 20px;
height: 20px;
border-radius: 5px;
border: 2px solid #007BFF;
background-color: #f0f0f0;
cursor: pointer;
}
Output:
Explanation: The default appearance depends on the browser and the operating system. You can change the background colour and border of the checkboxes, but still, the checkbox is controlled by the browser.
Method 2: Custom Checkbox Styling
You can totally customize the checkboxes, such as changing the checkmark, adding different shapes, or creating a unique look.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Checkbox</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Custom Checkbox</h1>
<form>
<input type="checkbox" id="checkbox2">
<label for="checkbox2">Subscribe</label>
</form>
</body>
</html>
CSS
input[type="checkbox"] {
opacity: 0;
position: absolute;
}
input[type="checkbox"] + label {
width: 30px;
height: 30px;
background-color: #f0f0f0;
border: 2px solid #007BFF;
border-radius: 5px;
display: inline-block;
cursor: pointer;
position: relative;
transition: background-color 0.3s, border-color 0.3s;
}
input[type="checkbox"]:checked + label {
background-color: #007BFF;
border-color: #0056b3;
}
input[type="checkbox"]:checked + label::after {
content: '✔';
color: white;
font-size: 20px;
position: absolute;
top: 2px;
left: 5px;
}
Output:
Explanation: You can hide the default checkbox using opacity: 0 and position offscreen using position: absolute. You can create a custom design for a checkbox using the label element.
Method 3: Custom Radio Button Styling
You can customize the radio buttons by using different shapes or icons instead of the usual circle and dot.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Radio Button</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Custom Radio Button</h1>
<form>
<input type="radio" name="choice" id="radio1">
<label for="radio1">Option 1</label>
<input type="radio" name="choice" id="radio2">
<label for="radio2">Option 2</label>
</form>
</body>
</html>
CSS
input[type="radio"] {
opacity: 0;
position: absolute;
}
input[type="radio"] + label {
width: 30px;
height: 30px;
border: 2px solid #007BFF;
border-radius: 50%; /* Circle shape */
background-color: #f0f0f0;
display: inline-block;
cursor: pointer;
position: relative;
transition: background-color 0.3s, border-color 0.3s;
}
input[type="radio"]:checked + label {
background-color: #007BFF;
border-color: #0056b3;
}
input[type="radio"]:checked + label::after {
content: '';
width: 16px;
height: 16px;
background-color: white;
border-radius: 50%;
position: absolute;
top: 7px;
left: 7px;
}
Output:
Explanation: A custom radio button is created using a circular label. The regular radio button is hidden by making it invisible (opacity: 0). When selected, the background and border of the label change.
Method 4: Toggle switch(Checkbox style)
You can use the toggle switch to turn options on or off, like enabling or disabling a feature. It is a checkbox that looks like a sliding switch.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Switch</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Toggle Switch</h1>
<form>
<input type="checkbox" id="toggle">
<label for="toggle"></label>
</form>
</body>
</html>
CSS
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label {
width: 50px;
height: 25px;
background-color: #ccc;
border-radius: 25px;
display: inline-block;
cursor: pointer;
position: relative;
transition: background-color 0.3s;
}
input[type="checkbox"] + label::after {
content: "";
width: 20px;
height: 20px;
background-color: white;
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
transition: transform 0.3s;
}
input[type="checkbox"]:checked + label {
background-color: #4CAF50;
}
input[type="checkbox"]:checked + label::after {
transform: translateX(25px);
}
Output:
Explanation: You create it using a checkbox input but hide the checkbox with CSS and style the label to look like a switch. A toggle switch looks like a sliding switch and is used to switch between two states (like on/off).
Conclusion
You can use the CSS properties to style the checkboxes. There are two types of styling available, such as default and custom styling. Depending on your requirements, the styling option can be chosen.
How to Style a Checkbox Using CSS – FAQs
1. How do I hide the default checkbox?
You can hide the default checkbox by setting its opacity to 0 and positioning it off-screen using CSS.
2. How do I create a custom checkbox?
You can create a custom checkbox by using a label element and styling it with CSS. The label can be styled to look like a checkbox, and you can use the :checked pseudo-class to change its appearance when selected.
3. Can I use images for custom checkboxes?
Yes, you can use images for custom checkboxes. You can set the background of the label element to an image and change it when the checkbox is checked.
4. Can I use CSS frameworks to style checkboxes?
Yes, you can use CSS frameworks like Bootstrap or Tailwind CSS to style checkboxes. These frameworks provide pre-designed styles and classes that you can apply to your checkboxes.
5. How do I make a custom checkbox responsive?
You can use flexible units like percentages and rems and media queries to adjust the size and layout of the checkbox based on the screen size.