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 picture

  1. Hi,

    I saw that I can attach photo to a checkbox by putting the HTML at its name.
    Can I put different picture for checked and unchecked?
    Example attached.

    Thanks
    https://dl.dropbox.com/u/20124225/apple.jpg

    Posted 9 years ago on Saturday September 22, 2012 | Permalink
  2. I've asked the developers for their input on this one. Maybe there is a way to do it.

    Posted 9 years ago on Sunday September 23, 2012 | Permalink
  3. Thanks,

    Im waiting for your reply.

    Posted 9 years ago on Sunday September 23, 2012 | Permalink
  4. In the meantime, maybe you will find this discussion illustrative:

    http://stackoverflow.com/q/3772273

    Posted 9 years ago on Monday September 24, 2012 | Permalink
  5. is it possible using
    input[type=checkbox]:before { content:""; display:inline-block; width:12px; height:12px; background:red; }
    input[type=checkbox]:checked:before { background:green; }‚Äč
    how exactly? do i need to declere the css for each checkbox?

    Thanks

    Posted 9 years ago on Monday September 24, 2012 | Permalink
  6. Hi Shtul,

    If you use background images, you can accomplish this with CSS. This is supported in IE9, Firefox, Chrome, Safari:

    [css]
    .gform_wrapper ul li.choice_8_1 input[type="radio"] + label img { background-image: url(default-image.png); }
    .gform_wrapper ul li.choice_8_1 input[type="radio"]:checked + label img { background-image: url(default-image.png); }

    You'll need to update the class on the li to match the choice your are working with and the background image url to match your field.

    Posted 9 years ago on Monday September 24, 2012 | Permalink
  7. Sorry about being so dumb... but the whole thing as a little bit new for me
    This is my form http://doarna.com/%D7%93%D7%95%D7%90%D7%A8-%D7%A0%D7%A2/.
    My form ID is 3.
    There are 3 checkbox which I want to have the pictures, Cellcom, Orange, Pelephone.
    http://picturepush.com/public/10147944
    http://picturepush.com/public/10148099
    Let's say for example XCellcom.jpg for unchecked and VCellcom.jpg for checked, XOrange.jpg for unchecked etc.
    I copied this syntax to stylesheet.css (the url here is only example) and nothing happened

    [css]
    .gform_wrapper ul li.choice_3_4 input[type="checkbox"] + label img { background-image: url(http://blabla/XCellcom.jpg); }
    .gform_wrapper ul li.choice_3_4 input[type="checkbox"]:checked + label img { background-image: url(http://blabla/VCellcom.jpg); }

    I will appreciate "for Dummies" explanation :)

    Tanks a lot for best support EVER!!

    Posted 9 years ago on Tuesday September 25, 2012 | Permalink
  8. Hi shtul,

    I actually gave you some misinformation in my previous post. Here is a demo page with this working:

    https://dl.dropbox.com/u/689144/demo/testing.htm

    You'll see the 2nd choice has a red background initially and a yellow background when checked.

    The 3rd option shows the images you specified when checked and unchecked. You'll note on this that you will need to apply additional styles to adjust the width and height of the label and likely resize the image to better fit your theme.

    The CSS powering both examples is below:

    [css]
    li.gchoice_1_2 label { background-color: #f00; }
    li.gchoice_1_2 input[type="checkbox"]:checked + label { background-color: #ff0; }
    
    li.gchoice_1_3 label { background-image: url(http://farm2.static.flickr.com/1437/892508720_eb0795a686_o.jpg); }
    li.gchoice_1_3 input[type="checkbox"]:checked + label { background-image: url(http://lomdiml.co.il/wp-content/uploads/2012/05/%D7%A1%D7%99%D7%9E%D7%9F-%D7%95%D7%99.jpg); }

    Let me know if that makes sense. :)

    Posted 9 years ago on Wednesday September 26, 2012 | Permalink
  9. Hi David,
    What you have done works, but it's not exactly what I asked for (though we are close :).
    I need the picture to replace the checkbox sign and the label should appear above.
    Mockup attached.
    http://picturepush.com/public/10246216

    If you can also add the css to set the width of the checkbox and make it not repeated i will appreciate that a lot (as I said, I'm pretty beginner)

    Thanks a lot for your help.

    Posted 9 years ago on Thursday September 27, 2012 | Permalink
  10. I try add this,
    .HideCheckBox input[type="checkbox"]{display:none;}
    and HideCheckBox in CSS at Advenced Tab but it doesnt seem to work

    Thanks.

    Posted 9 years ago on Thursday September 27, 2012 | Permalink
  11. changed it to:

    .HideCheckBox input[type="checkbox"]{display:none!important;}

    and it works!

    Thanks, I will continue my CSS issues in a new post

    Thanks so much.

    Posted 9 years ago on Thursday September 27, 2012 | Permalink
  12. Sorry, still not good.
    1. the first time when I click the image it dissapear and then appear again but it take a while, is there is a way to make it work smoothly?
    2. worth than that!!
    when i move beetween the radios at the screen top and then go back, it avoid my choices and it forget the thing i choose before.

    what happend?

    Thanks a lot

    Posted 9 years ago on Thursday September 27, 2012 | Permalink
  13. any suggestions?
    Thanks

    Posted 9 years ago on Friday September 28, 2012 | Permalink
  14. The original question solved, and thanks for that.
    Because I find it's not only my problem as mentioned here (without solution) http://www.gravityhelp.com/forums/topic/conditional-logic-and-fields-content
    I opened new post for that.
    http://www.gravityhelp.com/forums/topic/use-conditional-hidden-fields
    Thanks for your help.

    [solved]

    Posted 9 years ago on Sunday September 30, 2012 | Permalink
  15. Thanks for the update shtul. We'll work with you on the other topic and close this one.

    Posted 9 years ago on Monday October 1, 2012 | Permalink

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