<div class="checkboxes">
<input class=checkbox type="checkbox" name="" id="c1">
<label class=checkbox__label for="c1">Label1</label>
<input class=checkbox type="checkbox" name="" id="c2">
<label class=checkbox__label for="c2">Label2</label>
<input class=checkbox type="checkbox" name="" id="c3">
<label class=checkbox__label for="c3">Label3</label>
</div>
.checkboxes {
margin: 2rem;
display: flex;
align-items: center;
gap: 1rem;
}
.checkbox__label {
border: 1px #D2D0D0 solid;
border-radius: 14px;
background-color: transparent;
background-image: url(../images/pilesos.png);
background-repeat: no-repeat;
background-position: center center;
color :#3E3E3E;
font-family: "TT Norms Medium";
font-weight: normal;
font-size: 16px;
padding: 4px;
text-align: center;
vertical-align: top;
}
.checkbox:checked + .checkbox__label{
border-color: #0063C4
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.