Comunque per impedire l'evidenziazione blu di elementi in Chrome quando si fa clic rapidamente?

123

La maggior parte delle volte non sono preoccupato, ma ho un carosello di immagini e se clicco rapidamente sul div successivo e precedente, verranno evidenziati in Chrome.

Ho provato a usare il contorno: nessuno ma nessun effetto. Esistono soluzioni là fuori?

css google-chrome

— fabbro
fonte

Non vedo questo effetto sull'attuale versione di Chrome

— Billal Begueradj

So che il tuo caso d'uso è diverso, ma per chiunque altro voglia rimuoverlo da tutti i collegamenti, non consiglio di farlo. Ho provato a rimuoverlo su una PWA, ma senza il feedback visivo, la percezione dell'utente è che l'app è più lenta.

— collimarco

170

Oltre al collegamento fornito da Floremin , che cancella la selezione del testo utilizzando JavaScript per "cancellare" la selezione, puoi anche usare CSS puro per farlo. Il CSS è qui ...

.noSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Aggiungi semplicemente l' class="noSelect"attributo all'elemento a cui desideri applicare questa classe. Consiglio vivamente di provare questa soluzione CSS. Niente di sbagliato nell'usare JavaScript, credo solo che questo potrebbe essere potenzialmente più facile e ripulire un po 'le cose nel tuo codice.

Per Chrome su Android -webkit-tap-highlight-color: transparent; è una regola aggiuntiva che potresti voler sperimentare per il supporto in Android.

— SMT
fonte

1

Solo per Chrome, probabilmente hai solo bisogno di user-selecte webkit-user-select.

— smts

Questa è la soluzione con cui sto andando poiché ho solo il problema di evidenziazione in Chrome e funziona alla grande. Grazie a tutti coloro che hanno partecipato!

— Smith

36

Impossibile farlo funzionare con Chrome su Android. Ho dovuto usare-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

— Iwazaru

25

-webkit-tap-highlight-color: transparent; è la parte fondamentale di Chrome

— FisNaN

Per Chrome su Android -webkit-tap-highlight-color: trasparente; - Ha funzionato per me grazie!

— CK Munn

213

Per Chrome su Android, puoi utilizzare la proprietà CSS -webkit-tap-highlight-color :

-webkit-tap-highlight-color è una proprietà CSS non standard che imposta il colore dell'evidenziazione che appare su un collegamento mentre viene toccato. L'evidenziazione indica all'utente che il suo tocco è stato riconosciuto con successo e indica quale elemento sta toccando.

Per rimuovere completamente l'evidenziazione, puoi impostare il valore su transparent:

-webkit-tap-highlight-color: transparent;

Tieni presente che ciò potrebbe avere conseguenze sull'accessibilità: vedi outlinenone.com

— Iwazaru
fonte

4

Ho scoperto che quando si esegue su un touchscreen, ad esempio, Chrome si comporterà in modo molto simile a quello su Android. Avevo un <div> che lampeggiava in blu ogni volta che cliccavi da qualche parte al suo interno. Solo quando ho usato questa risposta si è fermato. Grazie!

— Valorum

2

Nessuno degli altri CSS Atty lo farà. È così importante poiché l'evidenziazione del tocco distorce l'aspetto di ciò che viene cliccato, disturbando il tuo linguaggio visivo.

— Dominic Cerisano

23

-webkit-tap-highlight-color: transparent;sembra funzionare anche.

— Bernard

1

Mi è piaciuto, per gli eventi touch è un must! Questa informazione ha un'utilità "fuori grafico"!

— Berker Yüceer,

1

Questa è la soluzione che ha funzionato per me nel 2020

— Blue Bot

66

Sto eseguendo Chrome versione 60 e nessuna delle precedenti risposte CSS ha funzionato.

Ho scoperto che Chrome aggiungeva l'evidenziazione blu tramite lo outlinestile. L'aggiunta del seguente CSS lo ha risolto per me:

:focus {
    outline: none !important;
}

— Jeff L.
fonte

5

tu, signore, sei un salvavita.

— Beckah

2

questo è quello funzionante per Chrome (versione 61) su Android

— Stefan

Funziona con le versioni più recenti di Chrome. Grazie!

— CrazedCoder

Super, mi chiedevo perché il mio fidato user-select:nonenon andasse da nessuna parte

— Sean T

Ho provato di tutto ma ha funzionato a meraviglia. Grazie per avermi salvato i capelli!

— Avinash Kumar

25

Ma, a volte, anche con user-selecte touch-calloutspento, cursor: pointer;può causare questo effetto, quindi, basta impostarlo cursor: default;e funzionerà.

— Gustavo B.
fonte

7

Questa è una risposta corretta, cursor: pointer;sta davvero causando punti salienti. Ma -webkit-tap-highlight-color: transparent;è una soluzione più universale.

— yanot

1

@yanot: leggi l'avvertimento -webkit-tap-highlight-colorprima di etichettarlo come una soluzione relativamente universale : developer.mozilla.org/en-US/docs/Web/CSS/…

— Hassan Baig

@HassanBaig Penso che sia ovvio che non intendevo cross-browser universale , ma in questo contesto, cioè attraverso diverse versioni di Chrome

— yanot

2

grazie - nessuna delle altre soluzioni ha funzionato per me. Ho dovuto rimuovere il puntatore del cursore per far scomparire l'evidenziazione blu

— RVP

3

cursor: defaultha fatto il trucco per me quando nient'altro ha funzionato.

— Telarian

-2

Prova a creare un gestore per l'evento selezionato su quegli elementi e nel gestore puoi cancellare la selezione.

Guarda questo:

Cancella la selezione del testo con JavaScript

È un esempio di cancellazione della selezione. Dovresti solo modificarlo per lavorare solo sull'elemento specifico di cui hai bisogno.

— Floremin
fonte

Quindi non può essere risolto da CSS, eh? Posso semplicemente cancellare il testo selezionato all'interno del mio gestore dei clic? EDIT- Grazie per l'esempio. Questo fa schifo che deve essere gestito tramite javascript. Speravo fosse solo un problema CSS.

— Smith

Inoltre, questo avrà un impatto sull'accessibilità?

— Smith

Puoi cancellare il testo nel gestore dei clic, ma dai un'occhiata alla risposta @smts con puro CSS.

— Floremin

-8

Questo funziona al meglio per me:

.noSelect:hover {
  background-color: white;
}

— nagy.zsolt.hun
fonte

6

Questo è MALE e una strada per un inferno futuro. Senza offesa.

— Mike Barwick

cosa succede se lo sfondo del sito non è bianco?

— rideon88

Questo non è gestibile. Nessuno lo fa per favore.

— Telarian