Material Checkboxes
How do I make an material checkboxes?
What is a material checkboxes? How do you make a material checkboxes? This script and codes were developed by Simeon Simeonoff on 17 September 2022, Saturday.
Material Checkboxes - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material Checkboxes</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <form class="cntr"> <div class="ig-control"> <input type="checkbox" id="checked" class="ig-control__cbx" checked/> <label for="checked">Checked</label> </div> <div class="ig-control"> <input type="checkbox" id="unchecked" class="ig-control__cbx"/> <label for="unchecked">Unchecked</label> </div> <div class="ig-control"> <input type="checkbox" id="checked_disabled" class="ig-control__cbx" checked disabled/> <label for="checked_disabled">Disabled Checked</label> </div> <div class="ig-control"> <input type="checkbox" id="unchecked_disabled" class="ig-control__cbx" disabled/> <label for="unchecked_disabled">Disabled Unchecked</label> </div>
</form>
</body>
</html>
Material Checkboxes - Script Codes CSS Codes
html { box-sizing: border-box;
}
*,
*:before,
*:after { box-sizing: border-box;
}
body { font-size: 100%; font-size-adjust: 0.58; font-family: 'Titillium Web', sans-serif; -webkit-font-smoothing: antialiased;
}
.cntr { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.ig-control { margin: 10px 0; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.ig-control__cbx:not(:checked),
.ig-control__cbx:checked { opacity: 0; position: absolute; margin: 0; z-index: -1; width: 0; height: 0; overflow: hidden; left: 0; pointer-events: none;
}
.ig-control__cbx ~ label { display: inline-block; position: relative; cursor: pointer; height: 20px; line-height: 20px; font-size: 1rem; color: #484848; padding-left: 36px;
}
.ig-control__cbx ~ label:before { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition: all .2s ease-in; transition: all .2s ease-in;
}
.ig-control__cbx ~ label:before,
.ig-control__cbx ~ label:after { position: absolute; content: ''; left: 0; border-radius: 2px;
}
.ig-control__cbx:not(:checked) ~ label:before { width: 9px; height: 15px; border: none; top: 1px; left: 0; -webkit-transform: rotateZ(37deg) translate3d(0, 0, 0); transform: rotateZ(37deg) scale(0.1); -webkit-transform-origin: 20% 40%; transform-origin: 100% 100%;
}
.ig-control__cbx:not(:checked) ~ label:after { width: 20px; height: 20px; background-color: transparent; border: 2px solid #757575; z-index: 0;
}
.ig-control__cbx:checked ~ label:before { top: 1px; left: 0; width: 9px; height: 15px; border-top: 2px solid transparent; border-left: 2px solid transparent; border-bottom: 2.5px solid white; border-right: 2.5px solid white; z-index: 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: rotateZ(37deg) scale(1); transform: rotateZ(37deg) scale(1); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%;
}
.ig-control__cbx:checked ~ label:after { width: 20px; height: 20px; background-color: #0375BE; border: 2px solid #0375BE;
}
.ig-control__cbx:disabled ~ label { color: #d1d1d1; pointer-events: none;
}
.ig-control__cbx:disabled:not(:checked) ~ label:before { background-color: transparent; border: 2px solid transparent;
}
.ig-control__cbx:disabled:not(:checked) ~ label:after { border-color: #D1D1D1; background-color: transparent;
}
.ig-control__cbx:disabled:checked ~ label:before { background-color: transparent;
}
.ig-control__cbx:disabled:checked ~ label:after { background-color: #D1D1D1; border-color: #D1D1D1;
}
Developer | Simeon Simeonoff |
Username | simeonoff |
Uploaded | September 17, 2022 |
Rating | 3 |
Size | 3,262 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 |
Material Switches | 2,691 Kb |
A Pen by Simeon Simeonoff | 2,602 Kb |
Material Inputs | 3,313 Kb |
Flexbox SASS Grid | 4,135 Kb |
Material Design Calendar | 4,021 Kb |
Flex Table | 4,059 Kb |
Toggle Buttons | 2,666 Kb |
Bouncy Switch | 2,830 Kb |
Avatar | 2,309 Kb |
Material Radio Buttons | 2,938 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 |
Two column of responsive height | Fixie | 2,908 Kb |
Cut and Paste Roll Link | BottomlineInteractive | 2,546 Kb |
Mini Profile | Frytyler | 3,828 Kb |
Flex layout example | Mofny | 1,663 Kb |
CSS Grid Overlay | Cliffpyles | 3,090 Kb |
CSS eye follow | Pedrocampos | 2,592 Kb |
A Pen by Michael Parenteau | Michaelparenteau | 2,133 Kb |
Flickering Light Text Effect | Mandymichael | 3,315 Kb |
A vuejs widget | Chrgl86 | 2,869 Kb |
Spinners using Font Icons | Keyamoon | 3,007 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!