C'è un modo per rendere un DIV non selezionabile?

Ecco una domanda CSS interessante per te!

Ho una textarea con uno sfondo trasparente sovrapposto a TEXT che vorrei usare come una sorta di filigrana. Il testo è grande e occupa la maggior parte dell'area di testo. Sembra carino, il problema è che quando l'utente fa clic nell'area di testo a volte seleziona invece il testo della filigrana. Voglio che il testo della filigrana non sia mai selezionabile. Mi aspettavo che se qualcosa fosse più basso nell'indice z non sarebbe selezionabile, ma i browser non sembrano preoccuparsi dei livelli dell'indice z quando si selezionano gli elementi. C'è un trucco o un modo per farlo in modo che questo DIV non sia mai selezionabile?

Ho scritto una semplice estensione jQuery per disabilitare la selezione qualche tempo fa: Disabilitare la selezione in jQuery . Puoi invocarlo$('.button').disableSelection();

In alternativa, usando CSS (cross-browser):

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

Il seguente codice CSS funziona in un browser quasi moderno:

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

Per IE, è necessario utilizzare JS o inserire l'attributo nel tag html.

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

Sto solo aggiornando la risposta originale e molto votata di aleemb con un paio di aggiunte al CSS.

Abbiamo usato la seguente combinazione:

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

Abbiamo ricevuto il suggerimento per l'aggiunta della voce webkit-touch da:
http://phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout.html

Apr 2015: sto solo aggiornando la mia risposta con una variazione che potrebbe tornare utile. Se è necessario rendere il DIV selezionabile / non selezionabile al volo e si desidera utilizzare Modernizr , le seguenti funzioni funzionano perfettamente in javascript:

    var userSelectProp = Modernizr.prefixed('userSelect');
    var specialDiv = document.querySelector('#specialDiv');
    specialDiv.style[userSelectProp] = 'none';

Come Johannes ha già suggerito, un'immagine di sfondo è probabilmente il modo migliore per raggiungere questo obiettivo nel solo CSS.

Una soluzione JavaScript dovrebbe inoltre influire sul "trascinamento" per essere efficace su tutti i browser più diffusi.

JavaScript:

<div onselectstart="return false;" ondragstart="return false;">your text</div>

jQuery:

var _preventDefault = function(evt) { evt.preventDefault(); };
$("div").bind("dragstart", _preventDefault).bind("selectstart", _preventDefault);

Ricco

Puoi usarlo pointer-events: none;nel tuo CSS

div {
  pointer-events: none;
}

puoi provare questo:

<div onselectstart="return false">your text</div>

Non sarebbe sufficiente una semplice immagine di sfondo per la textarea?

I browser WebKit (ovvero Google Chrome e Safari) hanno una soluzione CSS simile a -moz-user-select di Mozilla: nessuna

.no-select{    
    -webkit-user-select: none;
    cursor:not-allowed; /*makes it even more obvious*/
}

Anche in IOS se vuoi eliminare sovrapposizioni semitrasparenti grigie che appaiono suuchuch, aggiungi css:

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

Uso

onselectstart = "return false"

impedisce di copiare i tuoi contenuti.

Assicurati di impostare esplicitamente la posizione come assoluta o relativa affinché z-index funzioni per la selezione. Ho avuto un problema simile e questo mi ha risolto.

Non sei sicuro del tuo caso d'uso, ma potresti renderlo trascinabile.