Creating a custom modern and stylish checkboxes using pure CSS can enhance the visual appeal of your web forms. Here’s a simple and elegant checkboxes you can use it in your web forms.
HTML code for Checkboxes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Checkboxes</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form>
<h2>Select Programming Languages</h2>
<label class="custom-checkbox">
<input type="checkbox" value="Python" />
<span class="checkmark"></span>
Python
</label>
<label class="custom-checkbox">
<input type="checkbox" value="JavaScript" />
<span class="checkmark"></span>
JavaScript
</label>
<label class="custom-checkbox">
<input type="checkbox" value="Java" />
<span class="checkmark"></span>
Java
</label>
<label class="custom-checkbox">
<input type="checkbox" value="C++" />
<span class="checkmark"></span>
C++
</label>
</form>
</body>
</html>
CSS code for Checkboxes
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
form {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h2 {
margin-bottom: 20px;
font-size: 24px;
color: #333;
text-align: center;
}
.custom-checkbox {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 20px; /* Increased gap between checkboxes */
cursor: pointer;
font-size: 18px;
user-select: none;
}
.custom-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #ffcccc; /* Light red background color */
border: 2px solid #cc0000; /* Bold red border */
border-radius: 4px;
transition: background-color 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.custom-checkbox input:checked ~ .checkmark {
background-color: #cc0000; /* Darker red when checked */
box-shadow: 0 0 10px rgba(204, 0, 0, 0.6);
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.custom-checkbox input:checked ~ .checkmark:after {
display: block;
}
.custom-checkbox .checkmark:after {
left: 9px;
top: 5px;
width: 6px;
height: 12px;
border: solid white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
Hope this code will help you to design your web forms stylish.
Tags:
- “How to create custom checkboxes with pure CSS”
- “Modern CSS checkbox design tutorial”
- “Stylish checkbox styling with CSS”
- “Pure CSS custom checkbox examples”
- “CSS checkbox with custom background and border”
- “Responsive custom checkboxes using CSS”
- “Designing checkboxes with CSS only”
- “Checkbox styling for programming languages with CSS”
- “Step-by-step guide to CSS custom checkboxes”
- “Advanced CSS techniques for custom checkboxes”