input: el foco no funciona en Firefox

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

  •  05-07-2019
  •  | 
  •  

Pregunta

Tengo el siguiente estilo que he verificado que se está cargando: 

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

Hice esto para dejar de mostrar el rectángulo punteado cuando hago clic en algo. Esto funciona para todo en FireFox que he notado, excepto mis botones de entrada. Mis botones de entrada aún muestran un rectángulo punteado alrededor de ellos cuando hago clic en ellos.

¿Cómo puedo hacer que dejen de hacer eso?

¿Fue útil?

Solución

Necesitaba hacer esto ( fuente ): 

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

Ya tenía " esquema: 0 " configurado en todo a través de un reinicio, pero ese -moz-focus-inner era necesario para deshacerse de la línea de puntos en un botón con estilo CSS.

Otros consejos

<input ... onfocus="this.blur();"/> hará el truco

o jQuery: 

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

Esto funciona para mí (lo probé en Firefox 2 y 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>

Simplemente agregue un button.png :-)

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top