Custom Checkboxes
How do I make an custom checkboxes?
Just playing around with some checkbox styles. What is a custom checkboxes? How do you make a custom checkboxes? This script and codes were developed by Sean Stopnik on 21 December 2022, Wednesday.
Custom Checkboxes - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Custom Checkboxes</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section> <div class="checkbox one"> <input id="one" type="checkbox" checked/> <label for="one"></label> </div>
</section>
<section> <div class="checkbox two"> <input id="two" type="checkbox"/> <label for="two"></label> <span class="off">Off</span> <span class="on">On</span> </div>
</section>
<section> <div class="checkbox three"> <input id="three" type="checkbox"/> <label for="three"></label> </div>
</section>
<section> <div class="checkbox four"> <input id="four" type="checkbox"/> <label for="four"></label> <span class="off">Off</span> <span class="on">On</span> </div>
</section>
<section> <div class="checkbox five"> <input id="five" type="checkbox"/> <label for="five">Product Name</label> </div>
</section>
<section> <div class="checkbox six"> <input id="six" type="checkbox"/> <label for="six"></label> <span class="off">Off</span> <span class="on">On</span> </div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Custom Checkboxes - Script Codes CSS Codes
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .2s; -moz-transition: all .2s; transition: all .2s;
}
body { padding: 40px; font-family: arial; background: #ddd;
}
section { margin: 0 0 30px;
}
label { position: absolute; display: block; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); z-index: 10;
}
label:after { position: absolute; width: 10px; height: 10px; top: 5px; left: 5px; border-radius: 50%; background: #cc3300; content: ''; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(255, 255, 255, 0.2);
}
input[type=checkbox] { visibility: hidden;
}
.checkbox { position: relative;
}
.checkbox.one { width: 300px; height: 10px; border-radius: 5px; background: #353535; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(255, 255, 255, 0.2);
}
.checkbox.one label { top: -5px; left: -5px; background: #fff;
}
.checkbox.one input[type=checkbox]:checked + label { left: 285px;
}
.checkbox.one input[type=checkbox]:checked + label:after { background: #00bf00;
}
.checkbox.two { width: 160px; height: 30px; border-radius: 15px; background: #fff; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.1);
}
.checkbox.two label { top: 5px; left: 5px; background: #f1f1f1;
}
.checkbox.two span { position: absolute; top: 9px; font-size: 12px; font-weight: bold; color: #353535; text-transform: uppercase;
}
.checkbox.two .off { left: 30px;
}
.checkbox.two .on { right: 30px;
}
.checkbox.two input[type=checkbox] ~ .on { color: #acacac;
}
.checkbox.two input[type=checkbox]:checked + label { left: 135px;
}
.checkbox.two input[type=checkbox]:checked + label:after { background: #00bf00;
}
.checkbox.two input[type=checkbox]:checked ~ .off { color: #acacac;
}
.checkbox.two input[type=checkbox]:checked ~ .on { color: #353535;
}
.checkbox.three { width: 55px; height: 30px; border-radius: 15px; background: #fff; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.1);
}
.checkbox.three label { top: 5px; left: 5px; background: #f1f1f1;
}
.checkbox.three span { position: absolute; top: 9px; font-size: 12px; font-weight: bold; color: #353535; text-transform: uppercase;
}
.checkbox.three input[type=checkbox] ~ .on { color: #acacac;
}
.checkbox.three input[type=checkbox]:checked + label { left: 30px;
}
.checkbox.three input[type=checkbox]:checked + label:after { background: #00bf00;
}
.checkbox.four { width: 55px; height: 30px; border-radius: 15px; background: #fff; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.1);
}
.checkbox.four label { top: 5px; left: 5px; background: #f1f1f1;
}
.checkbox.four span { position: absolute; top: 10px; font-size: 10px; font-weight: bold; color: #353535; text-transform: uppercase;
}
.checkbox.four .off { right: 6px;
}
.checkbox.four .on { left: 8px;
}
.checkbox.four input[type=checkbox] ~ .on { opacity: 0;
}
.checkbox.four input[type=checkbox]:checked + label { left: 30px;
}
.checkbox.four input[type=checkbox]:checked + label:after { background: #00bf00;
}
.checkbox.four input[type=checkbox]:checked ~ .off { opacity: 0;
}
.checkbox.four input[type=checkbox]:checked ~ .on { opacity: 1;
}
.checkbox.five { width: 140px; height: 30px; border-radius: 3px; background: #fff;
}
.checkbox.five label { top: 0; left: 0; width: 100%; height: 30px; line-height: 30px; letter-spacing: 1px; text-align: center; text-transform: uppercase; font-size: 11px; font-weight: bold; color: #fff; border-radius: 3px; box-shadow: none;
}
.checkbox.five label:after { background: none; box-shadow: none;
}
.checkbox.five input[type=checkbox] + label { background: #acacac; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
}
.checkbox.five input[type=checkbox]:checked + label { background: #6bdda4; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.checkbox.six { width: 50px; height: 20px; border-radius: 15px; background: #fff;
}
.checkbox.six label { top: 2px; left: 2px; width: 16px; height: 16px; box-shadow: none; background: #ccc;
}
.checkbox.six label:after { background: none; box-shadow: none;
}
.checkbox.six span { position: absolute; top: 5px; font-size: 10px; font-weight: bold; color: #353535; text-transform: uppercase;
}
.checkbox.six .off { right: 6px;
}
.checkbox.six .on { left: 8px;
}
.checkbox.six input[type=checkbox] ~ .on { opacity: 0;
}
.checkbox.six input[type=checkbox]:checked + label { left: 32px; background: #353535;
}
.checkbox.six input[type=checkbox]:checked + label:after { background: none; box-shadow: none;
}
.checkbox.six input[type=checkbox]:checked ~ .off { opacity: 0;
}
.checkbox.six input[type=checkbox]:checked ~ .on { opacity: 1;
}
Developer | Sean Stopnik |
Username | seanstopnik |
Uploaded | December 21, 2022 |
Rating | 3 |
Size | 3,500 Kb |
Views | 14,168 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Simple Slider Effect in CSS - Vertical | 3,183 Kb |
CSS Range Slider | 3,218 Kb |
Button with Action | 2,955 Kb |
Save to Favorites | 3,395 Kb |
Photo Card | 4,287 Kb |
Save to Favorites | 3,419 Kb |
CSS Tooltip | 3,058 Kb |
Simple Accordian | 2,995 Kb |
Modular Sass Animation Library | 4,142 Kb |
CSS Donut Charts - Animated | 3,502 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Portfolio Landing Page | FDfranklin | 3,585 Kb |
Swiftype Lower Third | Zumwalt | 4,796 Kb |
A Pen by James Podles | Jpod | 2,656 Kb |
JQuery Validate checkbox group | Lunaman | 2,466 Kb |
Starfield old school style | Bolloxim | 5,214 Kb |
Fun animations with CSS3 | Minimalmonkey | 2,360 Kb |
Exploring css spinners | Akagr | 3,569 Kb |
Drawing a Terminal with CSS | Lachlanjc | 3,185 Kb |
Ionic - Wordpress REST API starter | Superpikar | 2,961 Kb |
Knob rotation | Alemesre | 2,122 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!