CSS Help

[habreu]

I am trying to use CSS put a font awesome checkmark on a radio button image when it is selected on this page

https://www.allfrom1supply.com/merch...t_Code=EC-TEST

I've tried using the CSS content property, the :before and :after and other selectors in various ways but haven't been able to sort it out. I'm hoping someone more savvy can clue me into how to do this without changing the template code itself.

This is a sample of the rendered code of one of the items.

<label for="l-51_ub-yellow" title="51 UB Yellow" class="show align-left swatch-style">
<input type="radio" name="Product_Attributes[1]:value" value="51_UB-Yellow" id="l-51_ub-yellow" data-attribute="SWCOLOR" data-option-price="30" data-regular-price="">
<img class="radio-option-image" src="graphics/00000001/51-UB-YELLOW.jpg" alt="51 UB Yellow" title="51 UB Yellow $30.00">
51 UB Yellow&nbsp;<br>+$30.00
</label>

[Bruce - PhosphorMedia]

Why not just increase the opacity of the border that already is there to indicate the selected item?

[habreu]

I wanted to originally highlight the outer border of the parent div - not the image border, or change the background color but these are higher up the 'cascade' than the :checked pseudo class so I couldn't sort out a way to do that.

The boss felt the image border outline by itself is not enough. So I thought the overlay might work but it has defied my skills so far. I wanted to avoid mucking with the template and thought a style only approach might be possible.

[habreu]

Well, I figured it out proof of the infinite monkey theorem - or rather one monkey trying infinite combinations. I couldn't sort the overlay but the checkmark next to the label text works fine.

.swatch-style .checkmark {visibility: hidden}
.swatch-style input[type="radio"]:checked ~ i.far.fa-check.checkmark {visibility: visible}