MacOS style checkbox & radio buttons with Pure CSS
CSS 2/3, macOS Mojave dark mode checkbox & radio buttons
Snippet by Anon
1268 0
HTML
<div class="forms">
<label for="cbk1">
<input type="checkbox" id="cbk1">
<span class="cbx">
<svg width="12px" height="11px" viewBox="0 0 12 11">
<polyline points="1 6.29411765 4.5 10 11 1"></polyline>
</svg>
</span>
<span>Dark</span>
</label>
<label for="cbk2">
<input type="checkbox" id="cbk2" checked>
<span class="cbx">
<svg width="12px" height="11px" viewBox="0 0 12 11">
<polyline points="1 6.29411765 4.5 10 11 1"></polyline>
</svg>
</span>
<span>Night</span>
</label>
<br><br><br>
<label for="rdo1">
<input type="radio" id="rdo1" name="radio">
<span class="rdo"></span>
<span>Dark</span>
</label>
<label for="rdo2">
<input type="radio" id="rdo2" name="radio" checked>
<span class="rdo"></span>
<span>Night</span>
</label>
</div>
CSS
html,
body {
height: 100%;
}
body {
display: grid;
font-family: -apple-system, BlinkMacSystemFont, "myriad-pro", sans-serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: #2b2b2d;
color: #c5c5c7;
}
.cbx {
position: relative;
display: block;
float: left;
width: 18px;
height: 18px;
border-radius: 4px;
background-color: #606062;
background-image: linear-gradient(#474749, #606062);
box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -1px 1px rgba(0,0,0,0.15);
transition: all 0.15s ease;
}
.cbx svg {
position: absolute;
top: 3px;
left: 3px;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke: #fff;
stroke-width: 2;
stroke-dasharray: 17;
stroke-dashoffset: 17;
transform: translate3d(0, 0, 0);
}
.rdo {
position: relative;
display: block;
float: left;
width: 18px;
height: 18px;
border-radius: 10px;
background-color: #606062;
background-image: linear-gradient(#474749, #606062);
box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -1px 1px rgba(0,0,0,0.15);
transition: all 0.15s ease;
}
.rdo:after {
content: "";
position: absolute;
display: block;
top: 6px;
left: 6px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
opacity: 0;
transform: scale(0);
}
.cbx + span,
.rdo + span {
float: left;
margin-left: 6px;
}
.forms {
margin: auto;
user-select: none;
}
.forms label {
display: inline-block;
margin: 10px;
cursor: pointer;
}
.forms input[type="checkbox"],
.forms input[type="radio"] {
position: absolute;
opacity: 0;
}
.forms input[type="radio"]:checked + .rdo {
background-color: #606062;
background-image: linear-gradient(#255cd2, #1d52c1);
}
.forms input[type="radio"]:checked + .rdo:after {
opacity: 1;
transform: scale(1);
transition: all 0.15s ease;
}
.forms input[type="checkbox"]:checked + .cbx {
background-color: #606062;
background-image: linear-gradient(#255cd2, #1d52c1);
}
.forms input[type="checkbox"]:checked + .cbx svg {
stroke-dashoffset: 0;
transition: all 0.15s ease;
}
{ } JS
Preview