CSS dashed outline on a SELECT element

dropdown,select,option,outline,dashed

[pmmenneg]

So, minor annoyance, but figured someone here might have a solution.

I would like to go ahead and remove the dashed 'outline' that appears inside a SELECT element when it has focus. As I am already modifying the border on focus, it seems a little much to have both at the same time. Additionally, I understand the accessibility issues, which is why I change the outline on focus.

element {outline: none;}

In the past, I've been able to add/remove outlines to (A) elements when they are clicked, and I can add or remove them to the SELECT item as well (they show up on the outside) but the internal ones seem to be out of my grasp. I figured they must be applied by default to the internal OPTION's, but disabling those doesn't seem to have any effect.

Any pointers?

[limbo]

Hi pmmenneg

Was this a browser specific issue? One you couldn't solve in IE?

You could target the OPTION element within the select using CSS, however it sounds to me like it's the SELECT element that is causing the issue...

This might help: [w3.org...]

[pmmenneg]

Hi limbo. Applying outline: none to the OPTION elements did not work in any browser, and I am beginning to think that maybe this is related to any styling of OPTION elements, such as changing colors, bolding, etc which has poor browser support AFAIK.

Have tried applying an ouline to an OPTION element, tried it on :focus, etc, no luck.

Anyways, thanks!

[CSS_Kidd]

Hey guys, here is another post [webmasterworld.com] we had on the same issue... Hopefully it will help.

[pmmenneg]

Unfortunately, the issue seems to be related to the option element specifically. No problem removing the outline from A, IMG, etc elements. Thanks!