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>

Update
Before you go ahead and remove the outline, please read this.
http://www.outlinenone.com/

Answer 1

<select onchange="this.blur();">

If you use this the border stays until you select an item from the list.

Answer 2

    input[type='range']::-moz-focus-outer {
    border: 0;
    outline: none !important;
    }

working 100%

Answer 3

Well, Duopixel’s answer is plain perfect. If we go a step further we can make it bulletproof.

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

There you go, only valid for Firefox and the ugly dotted outline around the selected option is gone.

Answer 4

This will remove focus from the select element and the outline:

$("select").click(function(){
    $(this).blur();
});

Though this isn't without its shortcomings on other browsers. You'll want to check the browser the user is using:

if (FIREFOX) {
    //implement the code
}

Answer 5

In general, form controls are impossible to style to that degree of accuracy. There's no 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://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

...

Answer 6

This will target all firefox versions

@-moz-document url-prefix() { 
    select {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
    }
}

You might want to remove the !important, if you plan to have the outline appear on other pages across your site that use the same stylesheet.