¿Hay alguna manera de hacer que un DIV no sea seleccionable?

¡Aquí hay unas preguntas CSS interesantes para ti!

Tengo un área de texto con un fondo transparente que superpone algunos TEXTOS que me gustaría usar como una especie de marca de agua. El texto es grande y ocupa la mayoría del área de texto. Se ve bien, el problema es que cuando el usuario hace clic en el área de texto, a veces selecciona el texto de la marca de agua. Quiero que el texto de la marca de agua nunca sea seleccionable. Esperaba que si algo estuviera más bajo en el índice z no sería seleccionable, pero los navegadores no parecen preocuparse por las capas de índice z al seleccionar elementos. ¿Hay algún truco o forma de hacerlo para que este DIV nunca sea seleccionable?

Escribí una extensión simple de jQuery para deshabilitar la selección hace algún tiempo: deshabilitar selección en jQuery . Puedes invocarlo a través de$('.button').disableSelection();

Alternativamente, usando CSS (cross-browser):

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

El siguiente código CSS funciona navegador casi moderno:

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

Para IE, debe usar JS o insertar atributo en la etiqueta html.

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

Simplemente actualizo la respuesta original y muy votada de aleemb con un par de adiciones al CSS.

Hemos estado usando el siguiente combo:

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

Recibimos la sugerencia para agregar la entrada webkit-touch de:
http://phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout.html

Abril de 2015: solo actualizo mi propia respuesta con una variación que puede ser útil. Si necesita hacer que el DIV sea seleccionable / no seleccionable sobre la marcha y esté dispuesto a utilizar Modernizr , lo siguiente funciona perfectamente en javascript:

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

Como Johannes ya ha sugerido, una imagen de fondo es probablemente la mejor manera de lograr esto solo en CSS.

Una solución de JavaScript también debería afectar el "arrastre" para que sea eficaz en todos los navegadores populares.

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

Rico

Puedes usar pointer-events: none;en tu CSS

div {
  pointer-events: none;
}

puedes probar esto:

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

¿No sería suficiente una simple imagen de fondo para el área de texto?

Los navegadores WebKit (es decir, Google Chrome y Safari) tienen una solución CSS similar a la de Mozilla -moz-user-select: none

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

También en IOS si desea deshacerse de las superposiciones semitransparentes grises que aparecen en el tacto, agregue css:

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

Utilizar

onselectstart = "return false"

Impide copiar tu contenido.

Asegúrese de establecer la posición explícitamente como absoluta o relativa para que el índice z funcione para la selección. Tuve un problema similar y esto lo resolvió por mí.

No estoy seguro de su caso de uso, pero podría hacerlo arrastrable.