<div>
<h1>Pure CSS Fancy Checkbox/Radio</h1>
<h2>Radio Buttons</h2>
<div class="group">
<input type="radio" name="rb" id="rb1" />
<label for="rb1">Check this</label>
<input type="radio" name="rb" id="rb2" />
<label for="rb2">... or this...</label>
<input type="radio" name="rb" id="rb3" />
<label for="rb3">or maybe this</label>
</div>
<h2>Checkbox</h2>
<div class="group">
<input type="checkbox" name="cb" id="cb1" />
<label for="cb1">Check this</label>
<input type="checkbox" name="cb" id="cb2" />
<label for="cb2">... and this...</label>
<input type="checkbox" name="cb" id="cb3" />
<label for="cb3">and maybe this</label>
</div>
</div>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #8e44ad;
color: white;
}
h1 {
margin: 0 0 1em;
}
.group {
display: flex;
align-items: center;
margin-bottom: 2em;
}
input[type="checkbox"], input[type="radio"] {
position: absolute;
opacity: 0;
z-index: -1;
}
label {
position: relative;
margin-right: 1em;
padding-left: 2em;
padding-right: 1em;
line-height: 2;
cursor: pointer;
}
label:before {
box-sizing: border-box;
content: " ";
position: absolute;
top: 0.3em;
left: 0;
display: block;
width: 1.4em;
height: 1.4em;
border: 2px solid white;
border-radius: 0.25em;
z-index: -1;
}
input[type="radio"] + label::before {
border-radius: 1em;
}
/* Checked */
input[type="checkbox"]:checked + label, input[type="radio"]:checked + label {
padding-left: 1em;
color: #8e44ad;
}
input[type="checkbox"]:checked + label:before, input[type="radio"]:checked + label:before {
top: 0;
width: 100%;
height: 2em;
background: white;
}
/* Transition */
label, label::before {
-webkit-transition: 0.25s all ease;
-o-transition: 0.25s all ease;
transition: 0.25s all ease;
}