I have built a form that uses images for a series of radio button options.
http://www.alltheotherswerepractice.com/test-shirt-swatches/
The form is working great in all browsers, except Internet Explorer 7.
Two things about the images break in IE7:
- The radio buttons are hidden, and the <img> are not selectable
- The <img> do not get highlighted when the option is selected
I unhide the radio buttons, the form logic works as expected.
To hide the buttons I was using a custom class:
.hideradio input[type="radio"] {display: none;}IE7 gets confused with display:none, so I started using:
.hideradio input[type="radio"] {position: absolute; left: -9999px;}}To highlight the selected option, I am using:
body #gform_wrapper_43 .gform_body ul.gfield_radio li input[type="radio"]:checked + label img {
background: #eee;
border: solid 2pt #c10073;
}}It all works as expected in every other browsers I have tried.
Does anyone have any ideas on how to make the <img> tags selectable in IE7, and how to make the highlighting work?
The site is running the latest public builds of wordpress, gravity forms, and thesis.
Things I have tried but can’t make work, thou I will admit that it may be user error on my part:
http://snook.ca/archives/javascript/using_images_as
http://www.tsd.net.au/blog/using-images-labels-fix-ie
http://www.jotform.com/answers/23448-IE-problem-with-radio-buttons
