Entrada: o foco não está funcionando no Firefox

StackOverflow https://stackoverflow.com/questions/1408563

  •  05-07-2019
  •  | 
  •  

Pergunta

Eu tenho o seguinte estilo que verifiquei está sendo carregado:

input:focus { outline: none; }
:focus { outline: none; }

Fiz isso para parar de mostrar o retângulo pontilhado quando clico em algo. Isso funciona para tudo no Firefox que eu notei, exceto meus botões de entrada. Meus botões de entrada ainda mostram um retângulo pontilhado ao redor deles quando clico neles.

Como posso fazer com que eles parem de fazer isso?

Foi útil?

Solução

Eu precisava fazer isso (fonte):

/*for FireFox*/
input[type="submit"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
button::-moz-focus-inner { border : 0px; }

/*for IE8 */
input[type="submit"]:focus,
input[type="button"]:focus { outline : none; }

Eu já tinha "contorno: 0" definido em tudo por meio de uma redefinição, mas era necessário que o -moz-focus-Inner fosse necessário para se livrar da linha pontilhada em um botão no estilo CSS.

Outras dicas

<input ... onfocus="this.blur();"/> vai fazer o truque

ou jQuery: 

$("input").focus(function(){this.blur();});

Isso funciona para mim (tentei no Firefox 2 e 3)

<html>
<head>
  <title>Test</title>
  <style>
   :focus { -moz-outline-style: none;}
  </style>
</head>
<body>
  <form action="#">
    <input type="image" src="button.png" />
  </form>
</body>
</html>

Basta adicionar um botão.png :-)

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top