Outline on Radio Button?

[Ethics]

Hey guys,

Is there anyway to get rid of the ugly dotted outline on radio buttons?

I've tried outline:none but that didn't seem to work when I applied the class to the button.

Thanks,
Mario

[richardhenry]

Edit: see my follow-up post.

[richardhenry]

Actually, I believe I'm incorrect -- you may be able to remove an outline by doing the following:

.myclass:focus {
outline: none;
}

The :focus part is important, calling the class into action when the element takes stage. You learn something new every day!

[Ethics]

Hey,

Thank you for the reply.

I tried it out in firefox but had no luck.

http://djbenballer.com/basic_feedback_form/

Added the style right to the radio button.

<input name="" type="radio" value="" class="myclass" />

Any other ideas?

[Paul O'B]

Any other ideas?

Yes leave the poor thing alone

You shouldn't remove features such a outline which are important for accessibility as keyboard users will have no way to navigate your page. Also form controls are almost impossible to style in a cross browser way so most times its a fruitless pursuit anyway.

People are used to how forms and their controls work on the browsers they use and in many cases it is far better to leave them alone.

The dotted line on the radio button in Firefox doesn't seem to be an outline anyway but rather some browser enhancement to the form element.

[Ethics]

Hey,

Paul, now that you put it that way, I love the outline haha. Kidding but you got a very good point there so I will leave the outlines as they are.

It's just being a designer as well as a perfectionist these little things get to us, but I guess we just have to let some things slide.

Thanks,
Mario

[richardhenry]

The day the web is more like print, then maybe we'll have the control we all desire. But I don't think that day will arrive. :-)