views:

740

answers:

3

Hello,

I have style my radio buttons with a background image, basically what i have done is

<input type="radio" id="btn" name="btn" style="opacity: 0;filter: alpha(opacity = 0);position:absolute;">
<label for="btn">My Text</label> <!--- added styles to it --->

with this i get output something like this

Image1 that shows how the display should be: http://i39.tinypic.com/2vcyidg.png

It works fine in every browser except ie8, in ie8 it shows a dotted box around hidden buttons when a label is selected

Image2 shows the problems in ie8: http://i39.tinypic.com/j8l635.png

I cant choose the property display:none; as in IE browsers it disables the radio buttons so i have to hide it.

How can i hide that dotted box in ie8?

Thank You.

Regards,

Shishant Todi.

+2  A: 

Is there a reason why you're not using <input type="hidden" />?

yaauie
Yes before i tried <input type="hidden" /> and i was successfully passing the values to form but dont know why everything else except Form Upload was not working.
Shishant
I will be better if you find why everything is not working, and use hidden input.
Sergey Kovalenko
+1  A: 

if you can use javascript:

<input onfocus="this.blur()" type="radio" id="btn" name="btn" style="opacity: 0;filter: alpha(opacity = 0);position:absolute;" />
Sergey Kovalenko
Thank You Very much
Shishant
It worked but still there was a little blur showing/hiding so i did it left:-999px;
Shishant
this is very, very hackish, which means it is likely to break if the stars don't align perfectly (IE version, js enabled, etc.). I'd highly sugggest figuring out why < input type="hidden" > is not working for you.
yaauie
A: 

I had a similar issue where my radio buttons and checkboxes were showing borders, but only in IE. In my case, this was a css issue where these inputs were being treated the same as text inputs. I simply defined a new class in the stylesheet and specified a border of zero px.

Saturday Schroder