PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Checkbox CSS question

  1. gvnet

    Referencing this thread:

    I have images for my checkbox labels and a border around the image when selected via this:

    gform_wrapper ul.gfield_radio li input[type="radio"]:checked + label img {
    height: auto;
    border: 4px solid #aaa;

    When I apply the border, it adds to the total size of the image which causes some issues as I use a responsive theme. I have tried a few things to address this but one of the ideas that looks cool is to apply a white border of the same size to the image before it is selected, so that when selected, the total image size does not change.

    What will I call to style the image before it is selected?

    I tried:
    gform_wrapper ul.gfield_radio li input[type="radio"]:unchecked + label img but it did not seem to work?


    Posted 10 years ago on Sunday January 20, 2013 | Permalink
  2. gvnet

    Sorry - been a long day...! Gets hard to think a little creatively (or logically?) if Firebug is not showing all that needs to be seen sometimes.

    This will do it:

    .gform_wrapper ul.gfield_radio li input[type="radio"] + label img


    Posted 10 years ago on Sunday January 20, 2013 | Permalink
  3. Thanks for the update.

    Posted 10 years ago on Monday January 28, 2013 | Permalink

This topic has been resolved and has been closed to new replies.