Custom Select Checkbox
How do I make an custom select checkbox?
Just another custom select support webkit only. What is a custom select checkbox? How do you make a custom select checkbox? This script and codes were developed by Haeman on 29 August 2022, Monday.
Custom Select Checkbox - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Custom Select Checkbox</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html{ } body{ background: #e8e8e1; font-family: sans-serif; font-size: 13px; } label { display: block; font-weight: bold; color: #383838; text-shadow: 0px 1px 0px #fff; margin: 3px 0px; } input[type="checkbox"] { -webkit-appearance: none; vertical-align: middle; display: inline-block; width: 2.5rem; display: inline-block; height: 1.4rem; cursor: pointer; } input[type="checkbox"]:before { position: absolute; content: ''; display: block; width: 2.4rem; height: 1.4rem; background: #dd513a; box-shadow: 0rem 0.080rem 0rem #fff, 0rem 0.080rem 0rem rgba(0, 0, 0, 0.2) inset; border-radius: 0.2rem; } input[type="checkbox"]:after { content: ''; position: absolute; display: block; width: 1rem; height: 1rem; line-height: 1rem; background: #e8e8e1; font-size: 0.3rem; font-weight: bold; color: rgb(68, 68, 68); text-align: center; margin-left: 0.20rem; margin-top: 0.20rem; border-radius: 0.2rem; box-shadow: 0rem 0.1rem 0.050rem rgba(0, 0, 0, 0.2); text-shadow: 0px 0.050rem 0px #fff; } input[type="checkbox"]:checked:after { margin-left: 1.20rem; } input[type="checkbox"]:checked:before { background: #00b684; } .container{ width: 400px; margin: 50px auto; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <h1>Magic Show Lights System</h1> <label> <input type="checkbox" name="select"/>Crowd Lights </label> <label> <input type="checkbox" name="select"/>Strobe Lights </label> <label> <input type="checkbox" name="select"/>Auto Integrate Lights </label> <label> <input type="checkbox" name="select"/>Red Lights </label> <label> <input type="checkbox" name="select"/>Green Light </label> <label> <input type="checkbox" name="select"/>Blue Lights </label> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Custom Select Checkbox - Script Codes CSS Codes
html{ } body{ background: #e8e8e1; font-family: sans-serif; font-size: 13px; } label { display: block; font-weight: bold; color: #383838; text-shadow: 0px 1px 0px #fff; margin: 3px 0px; } input[type="checkbox"] { -webkit-appearance: none; vertical-align: middle; display: inline-block; width: 2.5rem; display: inline-block; height: 1.4rem; cursor: pointer; } input[type="checkbox"]:before { position: absolute; content: ''; display: block; width: 2.4rem; height: 1.4rem; background: #dd513a; box-shadow: 0rem 0.080rem 0rem #fff, 0rem 0.080rem 0rem rgba(0, 0, 0, 0.2) inset; border-radius: 0.2rem; } input[type="checkbox"]:after { content: ''; position: absolute; display: block; width: 1rem; height: 1rem; line-height: 1rem; background: #e8e8e1; font-size: 0.3rem; font-weight: bold; color: rgb(68, 68, 68); text-align: center; margin-left: 0.20rem; margin-top: 0.20rem; border-radius: 0.2rem; box-shadow: 0rem 0.1rem 0.050rem rgba(0, 0, 0, 0.2); text-shadow: 0px 0.050rem 0px #fff; } input[type="checkbox"]:checked:after { margin-left: 1.20rem; } input[type="checkbox"]:checked:before { background: #00b684; } .container{ width: 400px; margin: 50px auto; }
Developer | Haeman |
Username | pedox |
Uploaded | August 29, 2022 |
Rating | 3 |
Size | 2,600 Kb |
Views | 32,384 |
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 |
Google Metro Flatten | 3,676 Kb |
Lollipop Loading | 3,119 Kb |
Handbook CSS3 | 3,032 Kb |
Ticketbox | 2,786 Kb |
Martabak Box | 2,895 Kb |
Loading Hourglass | 3,505 Kb |
Terminal | 3,250 Kb |
Mac | 2,892 Kb |
The Rainbow | 3,309 Kb |
The Yosemite | 3,964 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 |
Incremental game | Eprouver | 5,868 Kb |
Twitch Live Channels | Inkblotty | 4,956 Kb |
Ipad Mini Showcase | Hornebom | 10,479 Kb |
Compare resources on mobile sites | Gyusza | 3,226 Kb |
Exploding Text | Jjmartucci | 4,749 Kb |
GrcJS | Vino6 | 2,047 Kb |
Another brick in the wall | Fivera | 1,955 Kb |
Knob rotation | Alemesre | 2,122 Kb |
Owl Carousel - jumpTo | OwlFonk | 2,553 Kb |
Image grid with captions | Mchernin34 | 2,222 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!