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 |
Video-js scss | 13,211 Kb |
Animating TImescale Gsap tweenmax | 2,149 Kb |
Fancy Select Box | 5,516 Kb |
Toggle css on scroll position | 1,718 Kb |
Signature pad | 3,084 Kb |
Scroll animate | 2,428 Kb |
Call to action button | 3,077 Kb |
Check Mark troggle | 3,750 Kb |
Progressively reveal dots on a Bezier curve | 7,323 Kb |
Flexbox Center Right justify | 2,403 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 |
Simple Carousel Pure CSS | Dangvanthanh | 4,080 Kb |
Tooltip in table | Roine | 3,713 Kb |
RSW | JordanC | 3,726 Kb |
CSS3 Media Queries demo | Machal | 1,824 Kb |
Modal Dialog | Gigaleet | 2,251 Kb |
Animate elements with fixed gradient | Badabam | 4,406 Kb |
Touch Carousel - last, no gaps. | Berkin | 4,332 Kb |
Dribbble Template | ExtremelyGinger | 2,204 Kb |
Placeholder support for contentEditable elements, without JavaScript | Flesler | 1,863 Kb |
Cofee and sugar | Tripack | 2,094 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!