I am currently working with the following CSS:
.images_container input[type="checkbox"]:checked > label { border-color:#4378c3; opacity:1.0; }
.images_container input[type="checkbox"] > label:hover { opacity:1.0; }
.images_container input[type="checkbox"] { display:block; }
Now, let's take a look at my HTML code:
<div class="sale_image_container">
<input type="checkbox" id="<?=$result_id?>_checkbox" value="<?=$result_id?>" name="product[]" />
<div style="display:table-cell; vertical-align:bottom;" />
<label style="background-image:url(<?=$img?>)" class="sale_image" for="<?=$result_id?>_checkbox">
<div class="jpg_name_bg">
<div class="jpg"><?=$result_jpg?></div>
<img src="images/expand.png" onClick="expandImage('<?=$img?>')" />
<img src="images/fx.png" onClick="applyEffects('<?=$result_jpg?>')" />
</div>
</label>
</div>
</div>
Despite setting up the styles as per the CSS provided, I'm facing an issue where the first two styles are not being applied properly. The label is not reflecting the desired changes when the checkbox is checked.