Rimuovi Safari / Chrome textinput / textarea glow

Mi chiedo se è possibile rimuovere il bagliore blu e giallo predefinito quando faccio clic su un'area di input / testo usando CSS?

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

Tuttavia, è stato sostenuto che il mantenimento del 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 :focusselettore. Se hai un elemento, diciamo <div id="mydiv">stuff</div>, e stavi ottenendo il bagliore esterno su questo elemento div, basta applicare come al solito:

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

Sul ridimensionamento dell'area di testo nei browser basati su webkit:

L'impostazione di altezza massima e larghezza massima nell'area di testo non rimuoverà la maniglia di ridimensionamento visivo. Provare:

resize: none;

(e sì, sono d'accordo con "cerca di evitare di fare qualsiasi cosa rompa le aspettative dell'utente", ma a volte ha senso, vale a dire nel contesto di un'applicazione web)

Per personalizzare l'aspetto degli 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:

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

L'ho sperimentato in un divevento con un clic e dopo 20 ricerche ho trovato questo frammento che mi ha salvato la giornata.

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

Ciò disabilita l'evidenziazione del pulsante predefinito nei browser per dispositivi mobili webkit

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

Per favore, non usare outline:none;per disabilitare il contorno del focus. 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 bordo in modo accessibile.

L'idea in breve è quella di mostrare il bordo del contorno solo quando rileviamo un utente della tastiera. Quando 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 non è necessariamente una cattiva UX secondo me), avrai bisogno del seguente codice:

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

Questa soluzione ha funzionato per me.

input:focus {
    outline: none !important;
    box-shadow: none !important;
}

a volte succede che i pulsanti usino anche sotto 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;
}

<select class="custom-select">
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
        <option>option4</option>
</select>

<style>
.custom-select {
        display: inline-block;
        border: 2px solid #bbb;
        padding: 4px 3px 3px 5px;
        margin: 0;
        font: inherit;
        outline:none; /* remove focus ring from Webkit */
        line-height: 1.2;
        background: #f8f8f8;

        -webkit-appearance:none; /* remove the strong OSX influence from Webkit */

        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }
    /* for Webkit's CSS-only solution */
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
        .custom-select {
            padding-right:30px;    
        }
    }

    /* Since we removed the default focus styles, we have to add our own */
    .custom-select:focus {
        -webkit-box-shadow: 0 0 3px 1px #c00;
        -moz-box-shadow: 0 0 3px 1px #c00;
        box-shadow: 0 0 3px 1px #c00;
    }

    /* Select arrow styling */
    .custom-select:after {
        content: "▼";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        font-size: 60%;
        line-height: 30px;
        padding: 0 7px;
        background: #bbb;
        color: white;

        pointer-events:none;

        -webkit-border-radius: 0 6px 6px 0;
        -moz-border-radius: 0 6px 6px 0;
        border-radius: 0 6px 6px 0;
    }
</style>

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 input di testo e non riuscivo a far funzionare bene 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 Chrome.

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

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

E

 *{
     outline: none;   
   }