Gravity Support Forums Topic: checkbox picture

Gravity Support Forums Topic: checkbox picture https://legacy.forums.gravityhelp.com/topic/checkbox-picture Gravity Support Forums Topic: checkbox picture en-US Mon, 20 Apr 2026 01:01:03 +0000 http://bbpress.org/?v=1.0.1 <![CDATA[Search]]> q https://legacy.forums.gravityhelp.com/search.php Chris Hajer on "checkbox picture" https://legacy.forums.gravityhelp.com/topic/checkbox-picture#post-78233 Sun, 30 Sep 2012 22:34:29 +0000 Chris Hajer 78233@https://legacy.forums.gravityhelp.com/ Thanks for the update shtul. We'll work with you on the other topic and close this one. shtul on "checkbox picture" https://legacy.forums.gravityhelp.com/topic/checkbox-picture#post-78153 Sun, 30 Sep 2012 03:56:39 +0000 shtul 78153@https://legacy.forums.gravityhelp.com/ The original question solved, and thanks for that. Because I find it's not only my problem as mentioned here (without solution) <a href="http://www.gravityhelp.com/forums/topic/conditional-logic-and-fields-content" rel="nofollow">http://www.gravityhelp.com/forums/topic/conditional-logic-and-fields-content</a> I opened new post for that. <a href="http://www.gravityhelp.com/forums/topic/use-conditional-hidden-fields" rel="nofollow">http://www.gravityhelp.com/forums/topic/use-conditional-hidden-fields</a> Thanks for your help. [solved] shtul on "checkbox picture" https://legacy.forums.gravityhelp.com/topic/checkbox-picture#post-77907 Fri, 28 Sep 2012 10:58:36 +0000 shtul 77907@https://legacy.forums.gravityhelp.com/ any suggestions? Thanks shtul on "checkbox picture" https://legacy.forums.gravityhelp.com/topic/checkbox-picture#post-77722 Thu, 27 Sep 2012 18:44:25 +0000 shtul 77722@https://legacy.forums.gravityhelp.com/ 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 shtul on "checkbox picture" https://legacy.forums.gravityhelp.com/topic/checkbox-picture#post-77716 Thu, 27 Sep 2012 17:52:20 +0000 shtul 77716@https://legacy.forums.gravityhelp.com/ 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. shtul on "checkbox picture" https://legacy.forums.gravityhelp.com/topic/checkbox-picture#post-77632 Thu, 27 Sep 2012 07:31:22 +0000 shtul 77632@https://legacy.forums.gravityhelp.com/ I try add this, .HideCheckBox input[type="checkbox"]{display:none;} and HideCheckBox in CSS at Advenced Tab but it doesnt seem to work Thanks. shtul on "checkbox picture" https://legacy.forums.gravityhelp.com/topic/checkbox-picture#post-77586 Thu, 27 Sep 2012 03:03:02 +0000 shtul 77586@https://legacy.forums.gravityhelp.com/ 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. <a href="http://picturepush.com/public/10246216" rel="nofollow">http://picturepush.com/public/10246216</a> 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. David Smith on "checkbox picture" https://legacy.forums.gravityhelp.com/topic/checkbox-picture#post-77534 Wed, 26 Sep 2012 16:02:49 +0000 David Smith 77534@https://legacy.forums.gravityhelp.com/ Hi shtul, I actually gave you some misinformation in my previous post. Here is a demo page with this working: <a href="https://dl.dropbox.com/u/689144/demo/testing.htm" rel="nofollow">https://dl.dropbox.com/u/689144/demo/testing.htm</a> 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: <pre><code>[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); }</code></pre> Let me know if that makes sense. :) shtul on "checkbox picture" https://legacy.forums.gravityhelp.com/topic/checkbox-picture#post-77271 Tue, 25 Sep 2012 06:28:55 +0000 shtul 77271@https://legacy.forums.gravityhelp.com/ Sorry about being so dumb... but the whole thing as a little bit new for me This is my form <a href="http://doarna.com/%D7%93%D7%95%D7%90%D7%A8-%D7%A0%D7%A2/" rel="nofollow">http://doarna.com/%D7%93%D7%95%D7%90%D7%A8-%D7%A0%D7%A2/</a>. My form ID is 3. There are 3 checkbox which I want to have the pictures, Cellcom, Orange, Pelephone. <a href="http://picturepush.com/public/10147944" rel="nofollow">http://picturepush.com/public/10147944</a> <a href="http://picturepush.com/public/10148099" rel="nofollow">http://picturepush.com/public/10148099</a> 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 <pre><code>[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); }</code></pre> I will appreciate "for Dummies" explanation :) Tanks a lot for best support EVER!! David Smith on "checkbox picture" https://legacy.forums.gravityhelp.com/topic/checkbox-picture#post-77201 Mon, 24 Sep 2012 17:52:10 +0000 David Smith 77201@https://legacy.forums.gravityhelp.com/ Hi Shtul, If you use background images, you can accomplish this with CSS. This is supported in IE9, Firefox, Chrome, Safari: <pre><code>[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); }</code></pre> 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.