Existe-t-il un moyen de rendre un DIV non sélectionnable?

Voici une question CSS intéressante pour vous!

J'ai une zone de texte avec un fond transparent recouvrant du TEXTE que j'aimerais utiliser comme une sorte de filigrane. Le texte est volumineux et occupe la majorité de la zone de texte. Cela a l'air sympa, le problème est que lorsque l'utilisateur clique dans la zone de texte, il sélectionne parfois le texte du filigrane à la place. Je veux que le texte du filigrane ne puisse jamais être sélectionné. Je m'attendais à ce que quelque chose soit plus bas dans le z-index, il ne serait pas sélectionnable, mais les navigateurs ne semblent pas se soucier des couches de z-index lors de la sélection des éléments. Y a-t-il une astuce ou un moyen de faire en sorte que ce DIV ne soit jamais sélectionnable?

J'ai écrit une simple extension jQuery pour désactiver la sélection il y a quelque temps: Désactivation de la sélection dans jQuery . Vous pouvez l'invoquer à travers$('.button').disableSelection();

Alternativement, en utilisant CSS (cross-browser):

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

Le code CSS suivant fonctionne dans un navigateur presque moderne:

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

Pour IE, vous devez utiliser JS ou insérer un attribut dans une balise html.

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

Je viens de mettre à jour la réponse originale d'aleemb, très votée, avec quelques ajouts au css.

Nous avons utilisé le combo suivant:

.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;
}

Nous avons reçu la suggestion d'ajouter l'entrée webkit-touch à partir de:
http://phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout.html

2015 Apr: Je mets juste à jour ma propre réponse avec une variante qui peut être utile. Si vous devez rendre le DIV sélectionnable / non sélectionnable à la volée et que vous êtes prêt à utiliser Modernizr , ce qui suit fonctionne parfaitement en javascript:

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

Comme Johannes l'a déjà suggéré, une image d'arrière-plan est probablement le meilleur moyen d'y parvenir en CSS uniquement.

Une solution JavaScript devrait également affecter "dragstart" pour être efficace sur tous les navigateurs courants.

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);

Riches

Vous pouvez utiliser pointer-events: none;dans votre CSS

div {
  pointer-events: none;
}

vous pouvez essayer ceci:

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

Une simple image de fond pour la zone de texte ne suffirait-elle pas?

Les navigateurs WebKit (c'est-à-dire Google Chrome et Safari) ont une solution CSS similaire à -moz-user-select de Mozilla: aucune

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

Aussi dans IOS si vous voulez vous débarrasser des superpositions semi-transparentes grises apparaissant sur le toucher, ajoutez css:

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

Utilisation

onselectstart = "return false"

cela empêche la copie de votre contenu.

Assurez-vous que vous définissez explicitement la position comme absolue ou relative pour que z-index fonctionne pour la sélection. J'ai eu un problème similaire et cela l'a résolu pour moi.

Vous n'êtes pas sûr de votre cas d'utilisation, mais vous pourriez le rendre déplaçable.