<div class="container">
<div class="row">
<h3>Default:</h3>
<input type="checkbox" checked="checked"> One<br>
<input type="checkbox"> Two<br><br>
<input type="radio" name="defaultRadio" checked="checked"> One<br>
<input type="radio" name="defaultRadio">Two
</div>
<div class="row">
<h3>Custom Checkbox:</h3>
<label class="customContainer">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<label class="customContainer">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="customContainer">Three
<input type="checkbox">
<span class="checkmark"></span>
</label>
</div>
<div class="row">
<h3>Custom Radio Button:</h3>
<label class="customContainer">One
<input type="radio" checked="checked" name="radio">
<span class="radioButton"></span>
</label>
<label class="customContainer">Two
<input type="radio" name="radio">
<span class="radioButton"></span>
</label>
<label class="customContainer">Three
<input type="radio" name="radio">
<span class="radioButton"></span>
</label>
</div>
</div>
.container {
padding:15px;
border:5px solid #333;
display: flex;
}
.row {
width: 33.333%;
}
.customContainer {
display: block;
position: relative;
color: #333;
padding-left:40px;
margin-bottom: 15px;
cursor: pointer;
font-size: 25px;
user-select: none;
}
.customContainer input {
position: absolute;
opacity: 0;
cursor: pointer;}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #ffe8d6;
}
.customContainer:hover input ~ .checkmark {
background-color: #b7b7a4;
}
.customContainer input:checked ~ .checkmark {
background-color: #6b705c;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.customContainer input:checked ~ .checkmark:after {
display: block;
}
.customContainer .checkmark:after {
left: 10px;
top: 6px;
width: 7px;
height: 12px;
border: solid white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
.radioButton {
position: absolute;
background-color: #ffe8d6;
top: 0;
left: 0;
height: 25px;
width: 25px;
border-radius: 50%;
}
.customContainer:hover input ~ .radioButton{
background-color: #b7b7a4;
}
.customContainer input:checked ~ .radioButton{
background-color: #6b705c;
}
.radioButton:after {
content: "";
position: absolute;
display: none;
}
.customContainer input:checked ~ .radioButton:after {
display: block;
}
.customContainer .radioButton:after {
background-color: #fff;
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.