Rimuovi Safari / Chrome textinput / textarea glow

Mi chiedo se è ansible rimuovere il bagliore blu e giallo di default quando clicco su un’area di testo / area di testo usando CSS?

textarea, select, input, button { outline: none; } 

Sebbene, è stato sostenuto che mantenere il bagliore / contorno è effettivamente vantaggioso per l’accessibilità in quanto può aiutare gli utenti a vedere quale elemento è attualmente focalizzato.

Puoi anche usare lo pseudo-elemento ‘: focus’ per indirizzare gli input solo quando l’utente li ha selezionati.

Demo: https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/

Questo effetto può verificarsi anche su elementi non di input. Ho trovato i seguenti lavori come una soluzione più generale

 :focus { outline-color: transparent; outline-style: none; } 

Aggiornamento: potrebbe non essere necessario utilizzare il :focus selettore di :focus . Se hai un elemento, ad esempio

stuff

e stai ottenendo il bagliore esterno su questo elemento div, applicalo come normale:

 #mydiv { outline-color: transparent; outline-style: none; } 

Ridimensionamento della textarea nei browser basati su webkit:

L’impostazione di altezza massima e larghezza massima nell’area di testo non rimuoverà l’handle di ridimensionamento visivo. Provare:

 resize: none; 

(e sì, sono d’accordo con “cerca di evitare di fare qualcosa che infrange le aspettative dell’utente”, ma a volte ha senso, cioè nel contesto di un’applicazione web)

Per personalizzare l’aspetto di elementi del modulo Webkit da zero:

 -webkit-appearance: none; 

Carl W :

Questo effetto può verificarsi anche su elementi non di input. Ho trovato i seguenti lavori come una soluzione più generale

 :focus { outline-color: transparent; outline-style: none; } 

Spiegherò questo:

  • :focus significa che definisce gli elementi a fuoco. Quindi stiamo mettendo a fuoco gli elementi.
  • outline-color: transparent; significa che il bagliore blu è trasparente.
  • outline-style: none; fa la stessa cosa

Questa è la soluzione per le persone che si preoccupano dell’accessibilità .

Per favore, non usare il outline:none; per disabilitare il contorno della messa a fuoco. Stai uccidendo l’accessibilità del Web se lo fai. C’è un modo accessibile per farlo.

Dai un’occhiata a questo articolo che ho scritto per spiegare come rimuovere il confine in modo accessibile.

L’idea, in breve, è di mostrare solo il bordo del contorno quando rileviamo un utente della tastiera. Una volta che un utente inizia a usare il mouse, disabilitiamo il contorno. Di conseguenza ottieni il meglio dei due.

Se vuoi rimuovere il bagliore dai pulsanti in Bootstrap (che a mio parere non è necessariamente male UX), avrai bisogno del seguente codice:

 .btn:focus, .btn:active:focus, .btn.active:focus{ outline-color: transparent; outline-style: none; } 

L’ho sperimentato su un div che aveva un evento click e dopo 20 ricerche ho trovato questo frammento che mi ha salvato la giornata.

 -webkit-tap-highlight-color: rgba(0,0,0,0); 

Questo disabilita l’evidenziazione dei pulsanti di default nei browser mobili webkit

alcune volte accade che i bottoni vengano utilizzati anche in seguito per rimuovere la linea esterna

 input:hover input:active, input:focus, textarea:active, textarea:hover, textarea:focus, button:focus, button:active, button:hover { outline:0px !important; } 
   

Ho trovato utile rimuovere il contorno su un tipo di pulsante di input “porta scorrevole”, perché il contorno non copre il “cappuccio” destro dell’immagine della porta scorrevole, rendendo lo stato di messa a fuoco un po ‘instabile.

 input.slidingdoorbutton:focus { outline: none;} 

Avevo solo bisogno di rimuovere questo effetto dai miei campi di inserimento del testo e non riuscivo a far funzionare correttamente le altre tecniche, ma questo è ciò che funziona per me;

 input[type="text"], input[type="text"]:focus{ outline: 0; border:none; box-shadow:none; } 

Testato su Firefox e in Chrome.

Sicuro! Puoi rimuovere il bordo blu anche da tutti gli elementi HTML usando *

 *{ outline-color: transparent; outline-style: none; } 

E

  *{ outline: none; }