<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.