Remove outline from select box in FF

Question

Is it possible to remove the dotted line surrounding a selected item in a select element?

I have tried to add the outline property in CSS but it did not work, at least not in FF.

<style>
   select { outline:none; }
</style>

Answer 1

In general, form controls are impossible to style to that degree of accuracy. There's not browser I'm aware of that supports a sensible range of properties in all controls. That's the reason why there're a gazillion JavaScript libraries that "fake" form controls with images and other HTML elements and emulate their original functionality with code:

http://www.webstuffshare.com/2010/03/stylize-your-own-checkboxes/

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

http://lipidity.com/fancy-form/

...

Answer 2

Try one of these:

a:active {
 outline: none;
 -moz-outline: none;
}

a {
-moz-user-focus: none;
}

Reference