Como remover o contorno pontilhado do Firefox nos BOTÕES e também nos links?
https://stackoverflow.com/questions/71074
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Posso fazer com que o Firefox não exiba os feios contornos de foco pontilhados em links com isso:
a:focus {
outline: none;
}
Mas como posso fazer isso por <button> tags também?Quando eu faço isso:
button:focus {
outline: none;
}
os botões ainda têm o contorno de foco pontilhado quando clico neles.
(e sim, eu sei que isso é um problema de usabilidade, mas gostaria de fornecer minhas próprias dicas de foco que sejam apropriadas ao design, em vez de feios pontos cinzas)
Solução
button::-moz-focus-inner {
border: 0;
}
Outras dicas
Não há necessidade de definir um seletor.
:focus {outline:none;}
::-moz-focus-inner {border:0;}
No entanto, isso viola as melhores práticas de acessibilidade do W3C.O esboço existe para ajudar quem navega com teclados.
Se você preferir usar CSS para se livrar do contorno pontilhado:
/*for FireFox*/
input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
{
border : 0px;
}
/*for IE8 */
input[type="submit"]:focus, input[type="button"]:focus
{
outline : none;
}
O abaixo funcionou para mim no caso de LINKS, pensei em compartilhar - caso alguém tenha interesse.
a, a:visited, a:focus, a:active, a:hover{
outline:0 none !important;
}
Saúde!
:focus, :active {
outline: 0;
border: 0;
}
[Atualização] 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 com o Firefox 24.0.
Para remover o contorno pontilhado do Firefox em botões e tags de â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. Remova a borda azul do botão CSS com estilo personalizado no Chrome
Este código funcionou para mim no Firefox versão 30 no Windows 7.Talvez possa ajudar alguém por aí :)
button:focus {outline:0 !important;}
Não há como remover esse foco pontilhado no Firefox usando CSS.
Se você tiver acesso aos computadores onde sua aplicação web funciona, acesse about:config no Firefox e defina browser.display.focus_ring_width para 0.Então 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 destacar/focar uma vez, use o seguinte:
::-moz-focus-inner, :active, :focus {
outline:none;
border:0;
-moz-outline-style: none;
}
Isso apenas adiciona um pouco mais de segurança e fecha o negócio!
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 são 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;
}
Boa codificação!!
Na maioria dos casos, sem adicionar o !important ao código CSS, 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;
}
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.
Parece que a única maneira de conseguir isso é definindo
browser.display.focus_ring_width = 0
em about:config por navegador.
button::-moz-focus-inner { border: 0; }
Onde button pode ser qualquer seletor CSS para o qual você deseja desabilitar o comportamento.
Você pode querer 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}
Acho que você realmente deveria saber o que está fazendo removendo o contorno do foco, porque isso pode atrapalhar a navegação e a acessibilidade do teclado.
Se você precisar retirá-lo devido a um problema de design, adicione um :focus estado para o botão que substitui isso por alguma outra dica visual, como alterar a borda para uma cor mais brilhante ou algo parecido.
Às vezes sinto necessidade de eliminar aquele contorno chato, mas sempre preparo uma dica visual de foco alternativo.
E nunca use o blur() função js.Use o ::-moz-focus-inner pseudoclasse.
Remova o contorno pontilhado de links, botões e elementos 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ê tiver uma borda em um botão e quiser ocultar o contorno pontilhado no Firefox sem removendo a borda (e, portanto, a largura extra do 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;
}
Isso obterá o controle de intervalo:
:focus {
outline:none;
}
::-moz-focus-inner {
border:0;
}
input[type=range]::-moz-focus-outer {
border: 0;
}
De: Remova o contorno pontilhado do elemento de entrada de intervalo no Firefox
Podes tentar button::-moz-focus-inner {border: 0px solid transparent;} em seu CSS.
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 desfazer o que o bootstrap faz para botões de foco/ativos:
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 em seu código html para substituí-lo.
Sim, não perca !importante
button::-moz-focus-inner {
border: 0 !important;
}
