Come disabilitare l'evidenziazione della selezione del testo

Per le ancore che si comportano come pulsanti (ad esempio Domande , Tag , Utenti , ecc. Nella parte superiore della pagina Stack Overflow) o schede, esiste un modo CSS standard per disabilitare l'effetto di evidenziazione se l'utente seleziona accidentalmente il testo?

Mi rendo conto che questo potrebbe essere fatto con JavaScript, e un po 'googling ha prodotto l' -moz-user-selectopzione solo per Mozilla .

Esiste un modo conforme agli standard per ottenere questo risultato con i CSS e, in caso contrario, qual è l'approccio delle "migliori pratiche"?

AGGIORNAMENTO Gennaio 2017:

Secondo Can I use , user-selectattualmente è supportato in tutti i browser tranne Internet Explorer 9 e versioni precedenti (ma purtroppo ha ancora bisogno di un prefisso del fornitore).

Tutte le varianti CSS corrette sono:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

Si noti che user-selectè in fase di standardizzazione (attualmente in una bozza di lavoro del W3C ). Non è garantito che funzioni ovunque, e potrebbero esserci differenze nell'implementazione tra i browser e in futuro i browser potrebbero perdere supporto.

Ulteriori informazioni sono disponibili nella documentazione di Mozilla Developer Network .

Nella maggior parte dei browser, ciò può essere ottenuto utilizzando varianti proprietarie della user-selectproprietà CSS , originariamente proposte e poi abbandonate in CSS 3 e ora proposte in CSS UI Level 4 :

*.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in Internet Explorer 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

Per Internet Explorer <10 e Opera <15, dovrai utilizzare l' unselectableattributo dell'elemento che desideri non sia selezionabile. Puoi impostarlo usando un attributo in HTML:

<div id="foo" unselectable="on" class="unselectable">...</div>

Purtroppo questa proprietà non è ereditata, il che significa che devi inserire un attributo nel tag iniziale di ogni elemento all'interno di <div>. Se questo è un problema, puoi invece usare JavaScript per farlo ricorsivamente per i discendenti di un elemento:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

Aggiornamento del 30 aprile 2014 : questo attraversamento dell'albero deve essere rieseguito ogni volta che un nuovo elemento viene aggiunto all'albero, ma sembra da un commento di @Han che è possibile evitarlo aggiungendo un mousedowngestore di eventi che si imposta unselectablesulla destinazione del evento. Vedi http://jsbin.com/yagekiji/1 per i dettagli.

Questo non copre ancora tutte le possibilità. Sebbene sia impossibile avviare selezioni in elementi non selezionabili, in alcuni browser (ad esempio Internet Explorer e Firefox) è ancora impossibile impedire selezioni che iniziano prima e finiscono dopo l'elemento non selezionabile senza rendere l'intero documento non selezionabile.

Una soluzione JavaScript per Internet Explorer è:

onselectstart="return false;"

Fino a quando la proprietà di selezione dell'utente CSS 3 non sarà disponibile, i browser basati su Gecko supportano la -moz-user-selectproprietà che hai già trovato. I browser basati su WebKit e Blink supportano la -webkit-user-selectproprietà.

Questo ovviamente non è supportato nei browser che non utilizzano il motore di rendering Gecko.

Non esiste un modo rapido e semplice conforme agli "standard" per farlo; l'utilizzo di JavaScript è un'opzione.

La vera domanda è: perché desideri che gli utenti non siano in grado di evidenziare e presumibilmente copiare e incollare determinati elementi? Non mi sono mai imbattuto in una sola volta in cui non volevo consentire agli utenti di evidenziare una determinata porzione del mio sito Web. Molti dei miei amici, dopo aver trascorso molte ore a leggere e scrivere il codice, useranno la funzione di evidenziazione come un modo per ricordare dove si trovavano sulla pagina o fornire un pennarello in modo che i loro occhi sappiano dove guardare dopo.

L'unico posto in cui ho visto che questo è utile è se hai pulsanti per moduli che non devono essere copiati e incollati se un utente copia e incolla il sito Web.

Se si desidera disabilitare la selezione del testo su tutto tranne che sugli <p>elementi, è possibile farlo in CSS (fare attenzione a ciò -moz-noneche consente l'override nei sotto-elementi, che è consentito in altri browser con none):

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

Nelle soluzioni nelle risposte precedenti la selezione viene interrotta, ma l'utente pensa ancora che sia possibile selezionare il testo perché il cursore cambia ancora. Per mantenerlo statico, dovrai impostare il cursore CSS:

.noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

Questo renderà il tuo testo totalmente piatto, come sarebbe in un'applicazione desktop.

Puoi farlo in Firefox e Safari (anche Chrome?)

::selection { background: transparent; }
::-moz-selection { background: transparent; }

Soluzione alternativa per WebKit :

/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

L'ho trovato in un esempio di CardFlip.

Mi piace la soluzione ibrida CSS + jQuery.

Per rendere <div class="draggable"></div>non selezionabili tutti gli elementi all'interno , utilizzare questo CSS:

.draggable {
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
         -o-user-select: none;
            user-select: none;
}

.draggable input {
    -webkit-user-select: text;
     -khtml-user-select: text;
       -moz-user-select: text;
         -o-user-select: text;
            user-select: text;
 }

E poi, se stai usando jQuery, aggiungilo all'interno di un $(document).ready()blocco:

if (($.browser.msie && $.browser.version < 10) || $.browser.opera) $('.draggable').find(':not(input)').attr('unselectable', 'on');

Immagino che tu voglia ancora che tutti gli elementi di input siano interagibili, quindi lo :not()pseudo-selettore. Puoi usare '*'invece se non ti interessa.

Avvertenza: Internet Explorer 9 potrebbe non aver bisogno di questo pezzo aggiuntivo di jQuery, quindi potresti voler aggiungere un controllo di versione lì.

.hidden:after {
    content: attr(data-txt);
}

<p class="hidden" data-txt="Some text you don't want to be selected"></p>

Non è il modo migliore, però.

Puoi usare CSS o JavaScript per questo.

Il modo JavaScript è supportato nei browser più vecchi , come anche le vecchie versioni di Internet Explorer, ma se non è il tuo caso, usa il modo CSS quindi:

HTML / JavaScript:

<html onselectstart='return false;'>
  <body>
    <h1>This is the Heading!</h1>
    <p>And I'm the text, I won't be selected if you select me.</p>
  </body>
</html>

HTML / CSS:

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

<body class="not-selectable">
  <h1>This is the Heading!</h1>
  <p>And I'm the text, I won't be selected if you select me.</p>
</body>

Per Internet Explorer, inoltre, è necessario aggiungere la pseudo classefocus (.ClassName: focus) e outline-style: none.

.ClassName,
.ClassName:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline-style: none; /* Internet Explorer  */
}

Prova a inserire queste righe nel CSS e chiama la proprietà "disHighlight" nella classe:

.disHighlight {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -o-user-select: none;
    -moz-user-select: none;
}

Un aggiornamento di hack rapido

Se si utilizza il valore noneper tutte le user-selectproprietà CSS (inclusi i prefissi del browser), c'è un problema che può ancora verificarsi.

.div {
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none;    /* Firefox all             */
    -ms-user-select: none;     /* Internet Explorer  10+  */
     user-select: none;        /* Likely future           */
}

Come dice CSS-Tricks , il problema è:

WebKit consente comunque di copiare il testo, se si selezionano elementi attorno ad esso.

Puoi anche usare quello sotto per selezionare enforceun intero elemento, il che significa che se fai clic su un elemento, verrà selezionato tutto il testo racchiuso in quell'elemento. Per questo, tutto ciò che devi fare è cambiare il valore nonein all.

.force-select {
    -webkit-user-select: all;  /* Chrome 49+     */
    -moz-user-select: all;     /* Firefox 43+    */
    -ms-user-select: all;      /* No support yet */
    user-select: all;          /* Likely future  */
}

Per coloro che hanno difficoltà a ottenere lo stesso risultato nel browser Android con l'evento touch, utilizzare:

html, body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

Se stai usando Less e Bootstrap potresti scrivere:

.user-select(none);

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
}

<div id="foo" unselectable="on" class="unselectable">...</div>

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.unselectable = true;
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

-webkit-user-select: none;
-moz-user-select: none;

onselectstart="return false;"

::selection { 
    background: transparent; 
}

::-moz-selection { 
    background: transparent; 
}

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

<div class="draggable"></div>

.draggable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.draggable input {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
 }

if ($.browser.msie)
    $('.draggable').find(':not(input)').attr('unselectable', 'on');

Lavorando

CSS:

-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;

Questo dovrebbe funzionare, ma non funzionerà per i vecchi browser. Si è verificato un problema di compatibilità del browser.

Con SASS (sintassi SCSS)

Puoi farlo con un mixin :

// Disable selection
@mixin disable-selection {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Safari */
    -khtml-user-select: none;    /* Konqueror HTML */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by Chrome and Opera */
}

// No selectable element
.no-selectable {
    @include disable-selection;
}

In un tag HTML:

<div class="no-selectable">TRY TO HIGHLIGHT</div>

Provalo in questo codice .

Se si utilizza un prefissatore automatico è possibile rimuovere altri prefissi.

Compatibilità del browser qui .

A parte la proprietà solo di Mozilla, no, non c'è modo di disabilitare la selezione del testo con solo CSS standard (a partire da ora).

Se noti, Stack Overflow non disabilita la selezione del testo per i loro pulsanti di navigazione, e nella maggior parte dei casi sconsiglierei di farlo, poiché modifica il normale comportamento di selezione e lo rende in conflitto con le aspettative dell'utente.

Questo funziona in alcuni browser:

::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: transparent;}

Aggiungi semplicemente gli elementi / ID desiderati davanti ai selettori separati da virgole senza spazi, in questo modo:

h1::selection,h2::selection,h3::selection,p::selection{ background-color: transparent;}
h1::moz-selection,h2::moz-selection,h3::moz-selection,p::moz-selection{ background-color: transparent;}
h1::webkit-selection,h2::webkit-selection,h3::webkit-selection,p::webkit-selection{ background-color: transparent;}

Le altre risposte sono migliori; questo dovrebbe probabilmente essere visto come l'ultima risorsa / catchall.

Supponiamo che ci siano due divs in questo modo:

.second {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  -webkit-touch-callout: none;
  /* iOS Safari */
}

<div class="first">
  This is my first div
</div>

<div class="second">
  This is my second div
</div>

Impostare il cursore sul valore predefinito in modo da dare all'utente una sensazione non selezionabile.

Il prefisso deve essere utilizzato per supportarlo in tutti i browser. Senza un prefisso questo potrebbe non funzionare in tutte le risposte.

Ciò sarà utile se anche la selezione del colore non è necessaria:

::-moz-selection { background:none; color:none; }
::selection { background:none; color:none; }

... tutte le altre correzioni del browser. Funzionerà in Internet Explorer 9 o versioni successive.

Aggiungi questo al primo div in cui desideri disabilitare la selezione per il testo:

onmousedown='return false;' 
onselectstart='return false;'

NOTA:

La risposta corretta è corretta in quanto ti impedisce di poter selezionare il testo. Tuttavia, ciò non ti impedisce di essere in grado di copiare il testo, come mostrerò con il prossimo paio di schermate (dal 7 novembre 2014).

Come puoi vedere, non siamo stati in grado di selezionare i numeri, ma siamo riusciti a copiarli.

Testato su: Ubuntu , Google Chrome 38.0.2125.111.

Per ottenere il risultato di cui avevo bisogno, ho scoperto che dovevo usare entrambi ::selectioneuser-select

input.no-select:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input.no-select::selection {
    background: transparent;
}

input.no-select::-moz-selection {
    background: transparent;
}

Si fa facilmente con:

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

In alternativa:

Diciamo che hai un <h1 id="example">Hello, World!</h1>. Dovrai rimuovere il HTML interno di quello h1, in questo caso Ciao, Mondo . Quindi dovrai andare su CSS e fare questo:

#example::before // You can of course use **::after** as well.
{
    content: 'Hello, World!'; // Both single-quotes and double-quotes can be used here.

    display: block; // To make sure it works fine in every browser.
}

Ora pensa semplicemente che sia un elemento a blocchi e non un testo.

Questo non è CSS, ma vale la pena menzionare:

Interfaccia utente jQuery Disabilita selezione :

$("your.selector").disableSelection();

Controlla la mia soluzione senza JavaScript:

jsFiddle

li:hover {
    background-color: silver;
}
#id1:before {
    content: "File";
}
#id2:before {
    content: "Edit";
}
#id3:before {
    content: "View";
}

<ul>
    <li><a id="id1" href="www.w1.com"></a>
    <li><a id="id2" href="www.w2.com"></a>
    <li><a id="id3" href="www.w3.com"></a>
</ul>

Menu a comparsa con la mia tecnica applicata: http://jsfiddle.net/y4Lac/2/

Sebbene questo pseudo-elemento fosse in bozze di Selettori CSS livello 3, è stato rimosso durante la fase di Raccomandazione dei Candidati, poiché sembrava che il suo comportamento fosse sotto-specificato, specialmente con elementi nidificati, e l'interoperabilità non fosse stata raggiunta.

Viene discusso in Come :: la selezione funziona su elementi nidificati .

Nonostante sia implementato nei browser, puoi fare l'illusione che il testo non sia selezionato usando lo stesso colore e lo stesso colore di sfondo nella selezione del design della scheda (nel tuo caso).

Design CSS normale

p { color: white;  background: black; }

Alla selezione

p::-moz-selection { color: white;  background: black; }
p::selection      { color: white;  background: black; }

Non consentire agli utenti di selezionare il testo solleverà problemi di usabilità.