input: focus non funziona su Firefox

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

  •  05-07-2019
  •  | 
  •  

Domanda

Ho caricato il seguente stile che ho verificato: 

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

L'ho fatto per smettere di mostrare il rettangolo punteggiato quando faccio clic su qualcosa. Questo funziona per tutto ciò che ho notato in FireFox, ad eccezione dei miei pulsanti di input. I miei pulsanti di input mostrano ancora un rettangolo punteggiato intorno a loro quando faccio clic su di essi.

Come posso farli smettere di farlo?

È stato utile?

Soluzione

Dovevo farlo ( 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; }

Avevo già " outline: 0 " impostare tutto tramite un reset, ma quel -moz-focus-inner era necessario per sbarazzarsi della linea tratteggiata su un pulsante in stile CSS.

Altri suggerimenti

<input ... onfocus="this.blur();"/> farà il trucco

o jQuery: 

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

Questo funziona per me (l'ho provato sia in Firefox 2 che in 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 aggiungere un button.png :-)

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top