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/
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.