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

507

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)

Edward Tanguay
fonte
2
Parece que no Firefox 4, os elementos não estão mais recebendo um esboço por padrão ao serem clicados, mas apenas ao receber o foco do teclado.
quer
1
O que você chama de "feio" tem como objetivo oferecer suporte à acessibilidade de um site. Os usuários apenas de teclado não podem mais determinar qual parte do site está em foco ao remover este esboço. Seu site seria completamente inacessível e isso nunca deve ser o caso. Nunca remova o contorno. Melhor estilo no seu caminho.
Markus Graf

Respostas:

787
button::-moz-focus-inner {
  border: 0;
}
Josh Crozier
fonte
15
Sim, funciona para mim também! Agora, como isso pode ser feito para selects?
7wp 3/02/10
16
Observe que isso também funciona para entrada (por exemplo, input :: - moz-focus-inner {border: 0;})
El Yobo
15
Objetivo do cólon duplo: (notação CSS3) evotech.net/blog/2007/05/…
sholsinger
21
Este não funcionou para mim, porque o bootstrap.css estava criando esses botões pontilhados feios. Em vez disso, coloquei:focus {outline:none !important;}
machineaddict
5
: focus {estrutura de tópicos: none; :: :: - moz-focus-inner {border: 0;} seria menos específico #
181 Ben Ben
311

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

Anderson Custódio
fonte
8
Obrigado, isso funcionou para mim quando a resposta correta não. Eu devo estar usando o seletor errado.
irl_irl
Obrigado por isso, isso também será removido nos links e botões?
Nathan
3
Este é o melhor! A resposta aceita é apenas para <button>, não <a>, nem<input>
Ron van der Heijden
2
Perfeito no Mozilla Firefox 30 no Ubuntu (GNU / Linux).
e-info128
4
Vou colocar a nota sobre essa quebra de acessibilidade. É importante lembrar que nem todos podem usar um mouse, ver ou ver bem. Dito isto, pelo link (e bom senso) que oculta o esboço só quebra todos os anos quando é feito without ... an author-supplied visual focus indicator- em outras palavras, é bom substituir o estilo de agente do usuário pelo seu, como mencionado no OP. Idealmente, deve ser de alto contraste.
johncip
48

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; 
    }
chinkchink
fonte
Você não precisa de uma unidade com números que são zero. 0pxpode ser substituído por apenas0
gíria
44

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!

foxybagga
fonte
12
Simplesmente a { outline: none; }deve ser suficiente para links.
conceder
3
aqui o! important fez o truque, as outras soluções não tiveram isso e não funcionaram. para mim.
Cristiano Fontes
Mas frequentemente você deve usar a { outline: none; }com !important->a { outline: none !important; }
joryl 23/11
24
:focus, :active {
    outline: 0;
    border: 0;
}
blizzyx
fonte
Trabalhou como um encanto para uma caixa de opção Selecionar eu estava usando
Muhammad Ahsan
1
Isso não foi suficiente específica, e eu não queria usar importantes ou alvo apenas! aElementos, então eu encontrei uma boa opção para ser body :focus, body :active { outline: 0; border: 0; } ::-moz-focus-inner { border: 0; }
Ivan Durst
10

[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

Renato Carvalho
fonte
2
Não está mais funcionando: / A solução que funcionou é esta stackoverflow.com/a/3844452/925560
Renato Carvalho
8

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;}
Vartox
fonte
A mesma coisa aqui, esta é a única solução trabalhando em FF 38.0.5
OlivierH
6

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

Vitaly Sharovatov
fonte
Graças a funcionar bem, mas eu criei tantos links anteriormente que nunca recebo esse problema até agora. mas agora estou confuso, então qual é a razão anterior para apresentar?
Durga Rao
Esta é a resposta agora é completamente falsa. Definir ::-moz-focus-inner {border:0;}como mencionado em várias outras respostas funciona perfeitamente.
Andy Mercer
@AndyM Esta resposta funciona. A solução apresentada em outras respostas é para CSS e funciona apenas para sites individuais.
Rahil Wazir
7
A pergunta pergunta como isso pode ser feito com CSS, e a resposta diz que não pode ser. Isso é falso. Pode ser.
Andy Mercer
6

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!

Shannon Hochkins
fonte
6

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

prumo
fonte
Nenhuma outra solução funciona range- obrigado :)
Kamil Kiełczewski 27/01
Perfeito, também funciona no Firefox 72 no linux!
asdjfiasd 02/02
5

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)

entrada com pontos brancos

Depois (os pontos brancos ficam invisíveis) insira a descrição da imagem aqui

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 !!

Madan Sapkota
fonte
A !importantera necessário para me substituir estilo do Firefox. Felicidades!
SamHH 18/04/19
5

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.

Abhay Singh
fonte
4

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.

Flatline
fonte
4

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;
}
Herci
fonte
3
button::-moz-focus-inner { border: 0; }

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

ondulado
fonte
3

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} 
Jason Plank
fonte
2
@ Nathan um pouco atrasado, mas não ter nenhum estilo no estado de foco interferirá na experiência do teclado. você não saberá o que está focado ao pressionar a tecla Tab .
Hank #
@ Hkan Sim, eu concordo. Mas o esboço do Firefox é feio, especialmente quando se trata de uma borda de foco personalizada.
Nathan
@ Nathan, concordo plenamente com isso. O que devemos fazer é fornecer nosso próprio estilo para o estado de foco, em vez de tornar os elementos iguais no referido estado.
Hkan 6/11/15
3

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;
}
Fizer Khan
fonte
3

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;
}
Dave Everitt
fonte
3

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;
}
kurumkan
fonte
2

Parece que a única maneira de conseguir isso é definindo

browser.display.focus_ring_width = 0

em about: config por navegador.

AlexWilson
fonte
1

Isso funciona no firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}
star18bit
fonte
1

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;}
Waqas Bukhary
fonte
Na verdade (pelo menos no Firefox 77), você só precisa: button:focus { outline: none !important } Ou se você gosta de mim, não gosta! Importante, isso também substitui o estilo do Firefox: :root button:focus { outline: none }
Jonas Sandstedt
1

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.

Ehsan88
fonte
1

Sim, não perca !

button::-moz-focus-inner {
 border: 0 !important;
}
Riwaj Chalise
fonte
! important não faz parte da resposta aqui e, se o seu aplicativo precisar, você terá problemas maiores para resolver do que os destaques nos botões. Sempre se esforce para evitar! Importante.
Monokrome 17/07/19
0

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

habitual
fonte