I am using some stylized checks to mark some sizes of some products in a filter, seeing through the chrome inspection the checks are there when clicking the filter is performed, but in normal view I could not leave the checks as marked, I do not know where I may be wrong.
In this image the checks are stylized but I can not select any and the filter is not triggered.
Inthisotherimage,bytheinspector,Icanseethechecksandifthefilterischecked,itisdone.
Thesitecanbeviewedhere:
Developing site
I did a simulation here trying to make the most of your code. But you need to make some modest changes to your HTML structure and I do not know if that would be appropriate at this stage of the project ...
First of all, to select checkbox by clicking on some element this element should be a <label> with the for="idDoCheckbox" attribute and you must pass the CSS styles from <li> to that label within <a> , in addition checkbox must come before <a>
To understand better, see the example below.
.sidepanel {
margin: 0 0 10px;
padding: 14px 18px 7px;
border: 2px solid #ccc;
}
.widget_sized ul {
padding-bottom: 13px;
}
.widget_sized li {
display: inline-block;
vertical-align: top;
}
.widget_sized a label {
box-sizing: border-box;
width: 40px;
height: 30px;
display: block;
text-transform: uppercase;
text-align: center;
line-height: 28px;
font-size: 11px;
font-weight: bold;
color: #666;
border: 1px solid #e9e9e9;
transition: border 0.3s ease-in-out;
-webkit-transition: border 0.3s ease-in-out;
cursor: pointer;
}
.widget_sized a label:hover {
color: #333;
border: 1px solid black;
}
.widget_sized input[type="checkbox"]:checked + a > label {
border: 1px solid black;
}
.widget_sized input[type="checkbox"] {
display: none;
}
.widget_sized a {
text-decoration: none;
}<div class="sidepanel widget_sized product-data">
<ul>
<li>
<input type="checkbox" id="id1" class="item_filter size" value="10">
<a href="javascript:void(0);" class="sizeXS" .="">
<label for="id1">46</label>
</a>
</li>
<li>
<input type="checkbox" id="id2" class="item_filter size" value="10">
<a href="javascript:void(0);" class="sizeXS" .="">
<label for="id2">48</label>
</a>
</li>
</ul>
</div>