CSS only checkboxes
How do I make an css only checkboxes?
Checkboxes (or could be applied to radio buttons) made with only CSS and HTML markup.. What is a css only checkboxes? How do you make a css only checkboxes? This script and codes were developed by Scott on 09 December 2022, Friday.
CSS only checkboxes - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS only checkboxes</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <label for="check-2" class="cr-area"> <input type="checkbox" value="None" id="check-2" class="invis" /> Designed Checkbox (ie9+) <span class="check-radio"></span> </label> <label for="check-3" class="cr-slider"> <input type="checkbox" id="check-3" class="invis input-slide" /> <span class="crs"></span> <span class="crs-label">Text label</span> </label> <label for="check-4" class="cr-slider"> <input type="checkbox" id="check-4" class="invis input-slide" /> <span class="crs knob"></span> <span class="crs-label">Text label</span> </label> <label for="check-5" class="cr-slider"> <input type="checkbox" id="check-5" class="invis input-slide" /> <span class="crs knob labels"></span> <span class="crs-label">Text label</span> </label> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
CSS only checkboxes - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,700italic,600,400italic,300italic,600italic);
*{font-family: "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif; font-size:16px;}
label { display: block; margin-bottom: 18px; } label[for] { cursor: pointer; }
.crs { border-radius: 4px; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) inset; background: white; border: 1px solid #cccccc; margin-bottom: 8px; padding: 8px 4px; width: 100%;
}
.check-radio { border-radius: 2000px; background-clip: padding-box; background: #e0e0e0; border: 1px solid #cccccc; cursor: pointer; display: inline-block; height: 20px; position: relative; top: 4px; width: 20px; } .check-radio:after { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); border: 3px solid #000; border-top: none; border-right: none; content: ''; height: 5px; left: 5px; opacity: 0; position: absolute; top: 6px; width: 8px; } .check-radio:hover::after { opacity: .3; }
.invis { border: 0 !important; height: 1px !important; left: -999999px !important; overflow: hidden !important; position: absolute !important; width: 1px !important; }
.cr-area { position: relative; } .cr-area :checked + .check-radio:after { opacity: 1; }
.crs { border-radius: 12px; display: inline-block; height: 14px; max-width: 80px; overflow: hidden; position: relative; vertical-align: middle; } .crs:after { -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; -webkit-transition: 0.2s all; transition: 0.2s all; background: #ff3e3e; content: ""; height: 100%; position: absolute; right: 50%; top: 0; width: 50%; } .crs.knob { overflow: visible; } .crs.knob:after { -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 0 6px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.15) inset; background: white; border: 1px solid #aaa; border-radius: 2000px; height: 150%; top: -25%; } .crs.labels:before { content: "Off"; position: absolute; text-align: center; text-indent: 60%; top: 12%; }
.crs-label { vertical-align: middle; }
.input-slide:checked + .crs.knob { background: #6ccf31 !important; color: white; } .input-slide:checked + .crs.knob:after { background: white; }
.input-slide:checked + .crs:after { background: #6ccf31; right: 0; }
.input-slide:checked + .crs.labels:before { content: "On"; left: 5%; text-indent: 5%; }
Developer | Scott |
Username | scottohara |
Uploaded | December 09, 2022 |
Rating | 3 |
Size | 2,474 Kb |
Views | 8,096 |
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 |
Expanding Nav Element | 3,854 Kb |
Diamond Image | 1,978 Kb |
CSS only page transition demo | 4,064 Kb |
A Pen by Scott | 2,104 Kb |
Accessible Modal Window | 5,165 Kb |
Full screen panel ui | 4,351 Kb |
Toggle Button Example | 3,596 Kb |
Nav drop down menus | 3,996 Kb |
Burger Time | 2,867 Kb |
ARIA Accordion Example | 4,281 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 |
STIKHOI | Denmch | 7,122 Kb |
CSS-Flexbox-Demo | Sstiglets | 1,709 Kb |
Delete Hover | Chungman93 | 2,557 Kb |
IE flex collapse bug fix | Rowno | 2,678 Kb |
Sencha Touch 2.3.1 Basic Grid Example | Trozdol | 2,770 Kb |
Login-ng-modal | Heedoo | 3,566 Kb |
Zeichensatz | Moklick | 2,058 Kb |
Simple Login Form | JoshBlackwood | 4,418 Kb |
Multiple jCarousel | Pafnuty | 2,461 Kb |
A Pen by tugce | Ecgutcnkr | 4,197 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!