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.
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.
I've asked the developers for their input on this one. Maybe there is a way to do it.
Thanks,
Im waiting for your reply.
In the meantime, maybe you will find this discussion illustrative:
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
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.
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!!
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. :)
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.
I try add this,
.HideCheckBox input[type="checkbox"]{display:none;}
and HideCheckBox in CSS at Advenced Tab but it doesnt seem to work
Thanks.
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.
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
any suggestions?
Thanks
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]
Thanks for the update shtul. We'll work with you on the other topic and close this one.