How to style a checkbox like this?

Question

css

There is this code:

<label class="a-item">
  <span class="a-item-box">
       <input type="checkbox" value="1440" class="chAccess" data-value="">
  </span>
  <span class="a-item-title"> Какой-то текст </span><br>
       <span class="a-item-price"> Цена </span>
</label>

How to style checkboxes in this case?

Answer 1

No way on CSS, just take out input from a-item-box
Or make another span inside a-item-box

Answer 2

You need to attach a label to the checkbox. You hide the checkbox itself, but you style the label as you like.

<input type="checkbox" value="1440" class="chAccess" data-value="" id="check1">
<label for="check1"></label>

#check1{
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
}
label{
    /* Твои стили */
}

Answer 3

I agree with Andrey, for example, I often use such checkboxes myself