No announcement yet.

CSS Help

  • 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

    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

  • 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


    • 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.


      • 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}



        This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

        This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.