Custom Checkbox and radio inputs SCSS

Size
3,367 Kb
Views
28,336

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 Previews

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
Custom Checkbox and radio inputs SCSS - Script Codes
Custom Checkbox and radio inputs SCSS - Script Codes
Home Page Home
Developer Revolution Graphics
Username rgfx
Uploaded October 01, 2022
Rating 3.5
Size 3,367 Kb
Views 28,336
Do you need developer help for Custom Checkbox and radio inputs SCSS?

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!

Revolution Graphics (rgfx) Script Codes
Create amazing Facebook ads with AI!

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!