Announcement

Collapse
No announcement yet.

CSS Help

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    CSS Help

    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.

    Code:
    <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>

    #2
    Why not just increase the opacity of the border that already is there to indicate the selected item?
    Bruce Golub
    Phosphor Media - "Your Success is our Business"

    Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
    phosphormedia.com

    Comment


      #3
      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.

      Comment


        #4
        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.

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

        Comment

        Working...
        X