Checkbox with text and icon

by pj_js15

HTML

<div>


  <label class="delivery-filter">
    <input type="checkbox" />
    
    <span class="label">
      <span class="img_placeholder">
        &nbsp;
      </span>
      Sample Text (3)
    </span>
  </label>

  <label class="delivery-filter">
    <input type="checkbox" />
    <span class="label">
      <span class="img_placeholder">
        &nbsp;
      </span>
      Another Sample Text (12)
    </span>
  </label>

</div>

SCSS

input[type=checkbox] {
  display: none;
}
.label {
  position: relative;
  border: 1px solid #CCC;
  display: inline-block;
  padding: 10px 10px 10px 30px;
  border-radius: 5px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  color: #666;
  /* background: url("unchecked.png") no-repeat left center; */ 
  /* padding-left: 15px; */
  
}

.img_placeholder {
    border: 1px solid red;
    width: 15px;
    height: 15px;
    //display: inline-block;
    position: absolute;
    top: 10px;
    left: 8px;
  }

input[type=checkbox]:checked + .label {
  font-weight: bold;
  background-color: grey;
  /* background-image: url("checked.png"); */
}