Como remover o contorno pontilhado do Firefox nos BOTÕES, bem como nos links?

Posso fazer com que o Firefox não exiba os contornos de foco pontilhado feio nos links com isso:

a:focus { 
    outline: none; 
}

Mas como posso fazer isso também com <button>tags? Quando eu faço isso:

button:focus { 
    outline: none; 
}

os botões ainda têm o contorno pontilhado quando clico neles.

(e sim, sei que esse é um problema de usabilidade, mas gostaria de fornecer minhas próprias dicas de foco, que são apropriadas ao design, em vez de feios pontos cinza)

button::-moz-focus-inner {
  border: 0;
}

Não há necessidade de definir um seletor.

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

No entanto, isso viola as práticas recomendadas de acessibilidade do W3C. O esboço está lá para ajudar aqueles que navegam com teclados.

https://www.w3.org/TR/WCAG20-TECHS/F78.html#F78-examples

Se você preferir usar CSS para se livrar do esboço pontilhado:

/*for FireFox*/
    input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
    {   
        border : 0;
    } 
/*for IE8 and below */
    input[type="submit"]:focus, input[type="button"]:focus
    {     
        outline : none; 
    }

O abaixo funcionou para mim no caso de LINKS, pensou em compartilhar - no caso de alguém estar interessado.

a, a:visited, a:focus, a:active, a:hover{
    outline:0 none !important;
}

Felicidades!

:focus, :active {
    outline: 0;
    border: 0;
}

[Update] Esta solução não funciona mais. A solução que funcionou para mim é esta https://stackoverflow.com/a/3844452/925560

A resposta marcada como correta não funcionou no Firefox 24.0.

Para remover o contorno pontilhado do Firefox nos botões e tags âncora, adicionei o código abaixo:

a:focus, a:active, 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

Encontrei a solução aqui: http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html

Tentei a maioria das respostas aqui, mas nenhuma delas funcionou para mim. Quando percebi que também precisava me livrar do contorno azul dos botões do Chrome, encontrei outra solução. Remover borda azul do botão CSS personalizado no Chrome

Este código funcionou para mim no Firefox versão 30 no Windows 7. Talvez possa ajudar alguém lá fora :)

button:focus {outline:0 !important;}

Não há como remover esses focos pontilhados no Firefox usando CSS.

Se você tiver acesso aos computadores em que o aplicativo da web funciona, acesse about: config no Firefox e defina browser.display.focus_ring_widthcomo 0. O Firefox não mostrará nenhuma borda pontilhada.

O bug a seguir explica o tópico: https://bugzilla.mozilla.org/show_bug.cgi?id=74225

Existem muitas soluções encontradas na Web para isso, muitas das quais funcionam, mas para forçar isso, para que absolutamente nada possa realçar / focar uma vez que se use o seguinte:

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

Isso apenas adiciona um pouco de segurança extra e sela o acordo!

Isso obterá o controle de alcance:

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

De: remover o contorno pontilhado do elemento de entrada do intervalo no Firefox

Testado no Firefox 46 e Chrome 49 usando este código.

input:focus, textarea:focus, button:focus {
    outline: none !important;
}

Antes (pontos brancos são visíveis)

Depois (os pontos brancos ficam invisíveis)

Se você deseja aplicar apenas em alguns campos de entrada, botões, etc. Use o código mais específico.

input[type=text] {
  outline: none !important;
}

Feliz codificação !!

Basta adicionar este css para a caixa de seleção

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

Isso está funcionando bem para mim.

Eu acho que você realmente deve saber o que está fazendo removendo o esboço do foco, porque isso pode atrapalhar a navegação e acessibilidade do teclado.

Se você precisar removê-lo por causa de um problema de design, adicione um :focusestado ao botão que o substitua por outra sugestão visual, como alterar a borda para uma cor mais brilhante ou algo assim.

Às vezes, sinto a necessidade de descrever esse esboço irritante, mas sempre preparo uma sugestão visual de foco alternativo.

E nunca use a blur()função js. Use a ::-moz-focus-innerpseudo classe.

Na maioria dos casos, sem adicionar o !importantcódigo CSS, ele não funcionará.

Então, não esqueça de adicionar !important

a, a:active, a:focus{
    outline: none !important; /* Works in Firefox, Chrome, IE8 and above */
}

Ou qualquer outro código:

button::-moz-focus-inner {
  border: 0 !important;
}

button::-moz-focus-inner { border: 0; }

Onde buttonpode estar qualquer seletor de CSS para o qual você deseja desativar o comportamento.

Você pode intensificar o foco em vez de se livrar dele.

button::-moz-focus-inner {border: 2px solid transparent;}

button:focus::-moz-focus-inner {border-color: blue} 

Remova o contorno pontilhado dos links, botão e elemento de entrada.

a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

Se você possui uma borda em um botão e deseja ocultar o contorno pontilhado no Firefox sem remover a borda (e, portanto, sua largura extra no botão), você pode usar:

.button::-moz-focus-inner {
    border-color: transparent;
}

O código CSS abaixo funciona para remover isso:

a:focus, a:active, 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

Parece que a única maneira de conseguir isso é definindo

browser.display.focus_ring_width = 0

em about: config por navegador.

Isso funciona no firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}

Depois de tentar muitas opções acima, apenas o seguinte funcionou para mim.

*:focus, *:visited, *:active, *:hover  { outline:0 !important;}
*::-moz-focus-inner {border:0;}

Junto com o Bootstrap 3, usei esse código. O segundo conjunto de regras apenas desfaz o que a inicialização faz para os botões de foco / ativo:

button::-moz-focus-inner {
  border: 0;    /*removes dotted lines around buttons*/
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus{
  outline:0;
}

Observe que seu arquivo css personalizado deve vir após o arquivo css do Bootstrap no seu código html para substituí-lo.

Sim, não perca !

button::-moz-focus-inner {
 border: 0 !important;
}

Você pode tentar button::-moz-focus-inner {border: 0px solid transparent;}no seu CSS.