Custom Checkbox and radio inputs SCSS
How do I make an custom checkbox and radio inputs scss?
What is a custom checkbox and radio inputs scss? How do you make a custom checkbox and radio inputs scss? This script and codes were developed by Revolution Graphics on 01 October 2022, Saturday.
Custom Checkbox and radio inputs SCSS - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Custom Checkbox and radio inputs SCSS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="checkboxes">
<input id="a" type="checkbox" />
<label class="green-background" for="a"></label>
<input id="b" type="checkbox" />
<label class="green-background" for="b"></label>
<input id="c" type="checkbox" />
<label class="green-background" for="c"></label>
</div>
<div class="radios">
<input type="radio" name="a" />
<input type="radio" name="a" />
<input type="radio" name="a" />
<input class="medium" type="radio" name="a"/>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Custom Checkbox and radio inputs SCSS - Script Codes CSS Codes
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
/* ========= */
.checkboxes label { display: inline-block; user-select: none; position: relative; width: 38px; height: 38px; border: 2px solid rgba(0, 0, 0, 0.3); -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-transition-duration: 0.25s; -o-transition-duration: 0.25s; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; cursor: pointer; overflow: hidden; color: rgba(0, 0, 0, 0.1); text-align: center; margin: 2rem;
}
.checkboxes label:after { content: ''; display: block; margin-left: 9px; margin-top: 2px; width: 9px; height: 18px; border: solid rgba(0, 0, 0, 0.1); border-width: 0 6px 6px 0; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.checkboxes label:hover { border: 2px solid rgba(0, 0, 0, 0.5); color: black;
}
.checkboxes label:active { -moz-transition-duration: 0; -o-transition-duration: 0; -webkit-transition-duration: 0; transition-duration: 0; -webkit-filter: brightness(0.8);
}
.checkboxes input { display: none;
}
.checkboxes input:checked + label { color: #269b0a;
}
.checkboxes input:checked + .green-background { border-color: #269b0a; background: #269b0a;
}
.checkboxes input:checked + .green-background:after { content: ''; display: block; margin-left: 9px; margin-top: 2px; width: 9px; height: 18px; border: solid white; border-width: 0 6px 6px 0; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.checkboxes input:checked + label { -webkit-animation: boom 0.5s ease; -moz-animation: boom 0.5s ease; -ms-animation: boom 0.5s ease; -o-animation: boom 0.5s ease; animation: boom 0.5s ease;
}
@-webkit-keyframes boom { 25% { -moz-transform: scale(1.25); -ms-transform: scale(1.25); -webkit-transform: scale(1.25); transform: scale(1.25); }
}
@-moz-keyframes boom { 25% { -moz-transform: scale(1.25); -ms-transform: scale(1.25); -webkit-transform: scale(1.25); transform: scale(1.25); }
}
@-ms-keyframes boom { 25% { -moz-transform: scale(1.25); -ms-transform: scale(1.25); -webkit-transform: scale(1.25); transform: scale(1.25); }
}
@-o-keyframes boom { 25% { -moz-transform: scale(1.25); -ms-transform: scale(1.25); -webkit-transform: scale(1.25); transform: scale(1.25); }
}
@keyframes boom { 25% { -moz-transform: scale(1.25); -ms-transform: scale(1.25); -webkit-transform: scale(1.25); transform: scale(1.25); }
}
/* ========= */
.radios input[type="radio"] { -moz-appearance: none; -webkit-appearance: none; margin: 0 2rem; width: 2rem; height: 2rem; background: rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0 0 0 8px white, 0 0 0 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0 0 0 8px white, 0 0 0 2px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 8px white, 0 0 0 2px rgba(0, 0, 0, 0.3); border-radius: 50%; -moz-transition-duration: 0.25s; -o-transition-duration: 0.25s; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; cursor: pointer;
}
.radios input[type="radio"]:hover, .radios input[type="radio"]:checked { background: rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 0 0 0 6px white, 0 0 0 2px rgba(0, 0, 0, 0.5); -webkit-box-shadow: inset 0 0 0 6px white, 0 0 0 2px rgba(0, 0, 0, 0.5); box-shadow: inset 0 0 0 6px white, 0 0 0 2px rgba(0, 0, 0, 0.5);
}
.radios input[type="radio"]:checked { background: #269b0a; -moz-box-shadow: inset 0 0 0 6px white, 0 0 0 2px #269b0a; -webkit-box-shadow: inset 0 0 0 6px white, 0 0 0 2px #269b0a; box-shadow: inset 0 0 0 6px white, 0 0 0 2px #269b0a;
}
Custom Checkbox and radio inputs SCSS - Script Codes JS Codes
// https://codepen.io/bennettfeely thanks for your solution to checkboxes and radio buttons you are my hero
//https://codepen.io/lajlev/pen/diKbz thanks for the css checkbox
Developer | Revolution Graphics |
Username | rgfx |
Uploaded | October 01, 2022 |
Rating | 3.5 |
Size | 3,367 Kb |
Views | 28,336 |
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 |
Signature pad | 3,084 Kb |
SVG Background Repeat - Works IN IE | 2,957 Kb |
Toggle css on scroll position | 1,718 Kb |
Custom Select Box 2 | 5,033 Kb |
Scroll animate | 2,428 Kb |
Simple Horizontal Stacked Bar | 2,000 Kb |
Cross browser radio buttons | 2,474 Kb |
Video-js scss | 13,211 Kb |
Call to action button | 3,077 Kb |
Background image mouse scroll | 2,287 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 |
A Pen by Manoz | Manoz | 2,424 Kb |
Week7 replicate | Hwcasis | 1,620 Kb |
Fixed Scrolling Nav Bar | Philsinatra | 0 Kb |
Fading Navigation Bar | J-w-v | 2,805 Kb |
Z-index demo | Kblh | 1,534 Kb |
Css3 only dropdown menu | Riogrande | 2,519 Kb |
Mapbox Directions with geolocation tracking | Pollardld | 5,827 Kb |
Hover Animation from UNIQLO | Insprd | 3,772 Kb |
Angular-HAML | Cwacht | 2,022 Kb |
Apex Calculator | Michaelwnelson | 2,370 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!