Want to remove dotted outline around selected radio button in IE8

[Morris2]

Hi.

 

I am trying to remove the dotted outline around selected radio button in IE8.

In all other browsers this is not a problem.

 

I have been trying this without luck:

<input type="radio" name="amount" style="background-color: #EED8AE;outline:none;border:0;margin:0;padding:0; value="15"/>

 

I would really like to fix this with inline CSS if possible.

 

Whats wrong?

 

Best regards Morris

[scootstah]

Your code works just fine for me using IE8.

[Frank P]

Hi there,

 

You can do that with javascript. Just put this in the input tag:  onfocus="blur(this)". You can leave out the outline and border, because the dotted line is neither of them.

[floridaflatlander]

I'm not familar with what your doing but when I style with css I end my styles with double qoutes.

 

style="background-color: #EED8AE; outline:none; border:0; margin:0; padding:0;" value="15"

[floridaflatlander]

 

.... border:0; ...

 

It's been a while since I messed with this stuff but is it suppose to be border-style : none;  not border: 0; ?  Try one then the other and see what happens. I check the qoutes

[scootstah]

 

.... border:0; ...

 

It's been a while since I messed with this stuff but is it suppose to be border-style : none;  not border: 0; ?  Try one then the other and see what happens. I check the qoutes

 

border:0 is fine. Although in this case border makes no difference because the outline is from the "outline" property.

[Morris2]

 

Thanks for all your tips.

None of them works right now.

 

I discovered, that the dottet sqare appears around the button when I click the button, stays there, but disappears again when I click somewhere outside the button field.

Maybe this is called something else than border?

 

It is only like this in Internet Explorer, not in the other big browsers.

It just don't look good, that's why I want to get rid of it.

 

Thanks again and regards Morris

[Frank P]

I discovered, that the dottet sqare appears around the button when I click the button, stays there, but disappears again when I click somewhere outside the button field.

Correct. That's the difference between a radio button having focus or not. That's why I wrote to put this in the input tag: onfocus="blur(this)". Blur takes away the focus again. Have you tried that? 

[floridaflatlander]

I discovered, that the dottet sqare appears around the button when I click the button, stays there, but disappears again when I click somewhere outside the button field.

 

I tried your style inline on some radio buttons I have and I only get a line on an active buttom when I styled it like that and none if don't.

 

also I didn't get a line in firefox either.

 

I found this at stackoverflow

 

http://stackoverflow.com/questions/6194286/firefox-remove-dotted-line-around-radio-button

 

maybe it will help

[scootstah]

Like I said, your styles already work for IE8.

 

http://jsfiddle.net/mzbXf/1/

 

This works just fine for me in IE8 - there is no dotted outline around it.

[jcry87]

If you want fix that, you need add css styles for radio or checkbox :

 

input[type=radio]:focus { outline: none;}

input[type=radio]:-moz-focusring {outline:none;}

 

input[type=checkbox]:focus { outline: none;}

input[type=checkbox]:-moz-focusring {outline:none;}