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)


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;
}

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


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; 
    }

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!


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;
}

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


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;}

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


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!



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


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.


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.


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;
}

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

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


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} 

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;
}

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;
}

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;
}

2

Parece que a única maneira de conseguir isso é definindo

browser.display.focus_ring_width = 0

em about: config por navegador.


1

Isso funciona no firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}

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;}

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.


1

Sim, não perca !

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

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.