Remover contorno da caixa de seleção em FF

É possível remover a linha pontilhada ao redor de um item selecionado em um elemento selecionado?

Tentei adicionar a outlinepropriedade no CSS, mas não funcionou, pelo menos não no FF.

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

Atualizar
Antes de prosseguir e remover o esboço, leia isto.
http://www.outlinenone.com/

Encontrei uma solução, mas é a mãe de todos os hacks, espero que sirva como ponto de partida para outras soluções mais robustas. A desvantagem (grande demais na minha opinião) é que qualquer navegador que não suporte, text-shadowmas suporte rgba(IE 9) não renderizará o texto a menos que você use uma biblioteca como a Modernizr (não testada, apenas uma teoria).

O Firefox usa a cor do texto para determinar a cor da borda pontilhada. Então diga se você faz ...

select {
  color: rgba(0,0,0,0);
}

O Firefox tornará a borda pontilhada transparente. Mas é claro que seu texto também será transparente! Portanto, devemos de alguma forma exibir o texto. text-shadowvem ao resgate:

select {
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

Colocamos uma sombra de texto sem deslocamento e sem desfoque, de modo que substitui o texto. É claro que os navegadores mais antigos não entendem nada disso, então devemos fornecer um substituto para a cor:

select {
  color: #000;
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

É quando o IE9 entra em ação: ele suporta, rgbamas não a sombra de texto, portanto, você obterá uma caixa de seleção aparentemente vazia. Obtenha sua versão do Modernizr com text-shadowdetecção e faça ...

.no-textshadow select {
  color: #000;
}

Aproveitar.

Bem, a resposta de Duopixel é perfeita. Se dermos um passo adiante, podemos torná-lo à prova de balas.

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

Pronto, válido apenas para Firefox e o contorno pontilhado feio em torno da opção selecionada desapareceu.

Aqui está uma colaboração de soluções para corrigir problemas de estilo com as caixas de seleção do Firefox. Use este seletor CSS como parte de sua redefinição CSS usual.

A classe remove o contorno de acordo com a pergunta, mas também remove qualquer imagem de fundo (já que normalmente uso uma seta suspensa personalizada e a seta suspensa do sistema Firefoxes não pode ser removida no momento). Se estiver usando a imagem de fundo para qualquer coisa que não seja a imagem suspensa, simplesmente remova a linhabackground-image: none !important;

@-moz-document url-prefix() {
    select, select:-moz-focusring, select::-moz-focus-inner {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
       background-image: none !important;
       border:0;
    }
}

Isso terá como alvo todas as versões do firefox

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

Você pode remover o! Important, se planeja que o esboço apareça em outras páginas do seu site que usem a mesma folha de estilo.

Em geral, os controles de formulário são impossíveis de estilizar com esse grau de precisão. Não tenho conhecimento de nenhum navegador que ofereça suporte a uma gama razoável de propriedades em todos os controles. Essa é a razão pela qual existem zilhões de bibliotecas JavaScript que "falsificam" controles de formulário com imagens e outros elementos HTML e emulam sua funcionalidade original com código:

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

...

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

Se você usar isso, a borda permanecerá até que você selecione um item da lista.

Experimente um destes:

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

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

Referência

Aí vem a solução

:focus {outline:none;}
::-moz-focus-inner {border:0;}

Remova contorno / borda pontilhada de todas as tags selecionáveis ​​do Firefox.

Coloque esta linha de código em sua folha de estilo:

*:focus{outline:none !important;}   

Adicione border-style: none à sua seleção em CSS.

select {
border-style: none; }

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

trabalhando 100%

Isso removerá o foco do selectelemento e do contorno :

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

Embora isso não seja isento de falhas em outros navegadores. Você deve verificar o navegador que o usuário está usando:

if (FIREFOX) {
    //implement the code
}