Have Geek Brain

Hidden radio button but box around it in ie8

I have a style of my radio buttons with a background image, basically what I did 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 cannot choose to display properties: none; like in IE browsers it disables the radio buttons, so I need to hide that.

How can I hide this dotted rectangle in ie8?

Thanks.

Hello,

Shishant Todi.

+1


a source to share


3 answers


if you can use javascript:



<input onfocus="this.blur()" type="radio" id="btn" name="btn" style="opacity: 0;filter: alpha(opacity = 0);position:absolute;" />
+2


a source


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



+3


a source


I had a similar problem where my radio buttons and checkboxes were showing borders, but only in IE. In my case, it was a css issue where these inputs were handled the same as text inputs. I just defined a new class in the stylesheet and set a border with zero pixels.

0


a source






More articles:


All Articles