it-swarm-pt.tech

Como remover o contorno pontilhado do Firefox em botões, bem como links?

Eu posso fazer o Firefox não exibir os contornos de foco pontilhado feio em ligações com isso:

a:focus { 
    outline: none; 
}

Mas como posso fazer isso para as tags <button> também? Quando 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 este é um problema de usabilidade, mas eu gostaria de fornecer minhas próprias dicas de foco que são apropriadas para o design em vez de feios pontos cinza)

459
Edward Tanguay
button::-moz-focus-inner {
  border: 0;
}
686
user27656

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 esquema está lá para ajudar aqueles que navegam com teclados.

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

280
Anderson Custódio

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

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

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

Felicidades!

42
foxybagga
:focus, :active {
    outline: 0;
    border: 0;
}
22
blizzyx

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

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

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

9
Renato Carvalho

Tentei a maioria das respostas aqui, mas nenhum deles 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 de estilo personalizado css no Chrome

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

button:focus {outline:0 !important;}
7
Vartox

Há muitas soluções encontradas na web para isso, muitas das quais funcionam, mas para forçar isso, para que absolutamente nada possa ser destacado/focado uma vez, use o seguinte:

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

Isso só adiciona um pouco mais de segurança e sela o acordo!

5
Shannon Hochkins

Não há como remover esse foco pontilhado no Firefox usando CSS.

Se você tiver acesso aos computadores onde o seu aplicativo da Web funciona, acesse about: config no Firefox e defina browser.display.focus_ring_width como 0. O Firefox não mostrará nenhuma borda pontilhada.

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

5
Vitaly Sharovatov

Basta adicionar este css para caixa de seleção

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

Isso está funcionando bem para mim.

4
Abhay Singh

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

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

Antes (pontos brancos são visíveis)

input with white dots

Depois (os pontos brancos são invisíveis) enter image description here

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

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

Codificação Feliz !!

4
Madan Sapkota

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

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} 
2
John

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

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

Parece que a única maneira de conseguir isso é configurando

browser.display.focus_ring_width = 0

em about: config por navegador.

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

Onde button pode ser qualquer que seja o seletor CSS para o qual você deseja desabilitar o comportamento.

2
wavded

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

Se você precisar removê-lo por causa de um problema de design, adicione um estado :focus ao botão que substitui isso por alguma outra sugestão visual, como alterar a borda para uma cor mais clara ou algo parecido.

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

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

2
Flatline

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
kurumkan

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

Isto irá obter o controle de faixa:

: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 do intervalo no Firefox

2
bob

Sim, não perca ! Importante

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

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;}
0
Waqas Bukhary

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

0
usual

Isso funciona no firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}
0
star18bit

Junto com o Bootstrap 3, usei este código. O segundo conjunto de regras apenas desfaz o que o bootstrap faz para os botões focus/active:

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

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

0
Ehsan88