Cómo deshabilitar el resaltado de selección de texto

Para las anclas que actúan como botones (por ejemplo, Preguntas , Etiquetas , Usuarios , etc. en la parte superior de la página de Desbordamiento de pila) o hay pestañas, ¿hay alguna forma estándar de CSS para deshabilitar el efecto de resaltado si el usuario selecciona accidentalmente el texto?

Me doy cuenta de que esto se puede hacer con JavaScript, y un poco de google produjo la -moz-user-selectopción de solo Mozilla .

¿Existe una manera que cumpla con los estándares para lograr esto con CSS, y si no, cuál es el enfoque de "mejor práctica"?

ACTUALIZACIÓN enero de 2017:

Según Can I use , user-selectactualmente es compatible con todos los navegadores, excepto Internet Explorer 9 y versiones anteriores (pero lamentablemente aún necesita un prefijo de proveedor).

Todas las variaciones correctas de CSS son:

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

Tenga user-selecten cuenta que está en proceso de estandarización (actualmente en un borrador de trabajo del W3C ). No se garantiza que funcione en todas partes, y puede haber diferencias en la implementación entre los navegadores y en el futuro los navegadores pueden dejar de admitirlo.

Se puede encontrar más información en la documentación de Mozilla Developer Network .

En la mayoría de los navegadores, esto se puede lograr utilizando variaciones propietarias en la user-selectpropiedad CSS , originalmente propuesta y luego abandonada en CSS 3 y ahora propuesta en CSS UI Nivel 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;
}

Para Internet Explorer <10 y Opera <15, deberá usar el unselectableatributo del elemento que desea que no se pueda seleccionar. Puede configurar esto usando un atributo en HTML:

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

Lamentablemente, esta propiedad no se hereda, lo que significa que debe colocar un atributo en la etiqueta de inicio de cada elemento dentro del <div>. Si esto es un problema, podría usar JavaScript para hacer esto de forma recursiva para los descendientes de 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"));

Actualización 30 de abril de 2014 : este recorrido del árbol debe volver a ejecutarse cada vez que se agrega un nuevo elemento al árbol, pero según un comentario de @Han es posible evitar esto agregando un mousedowncontrolador de eventos que se establece unselectableen el objetivo del evento. Ver http://jsbin.com/yagekiji/1 para más detalles.

Esto todavía no cubre todas las posibilidades. Si bien es imposible iniciar selecciones en elementos no seleccionables, en algunos navegadores (Internet Explorer y Firefox, por ejemplo) todavía es imposible evitar selecciones que comienzan antes y terminan después del elemento no seleccionable sin hacer que todo el documento sea no seleccionable.

Una solución de JavaScript para Internet Explorer es:

onselectstart="return false;"

Hasta que la propiedad de selección de usuario de CSS 3 esté disponible, los navegadores basados ​​en Gecko admiten la -moz-user-selectpropiedad que ya encontró. Los navegadores WebKit y Blink admiten la -webkit-user-selectpropiedad.

Por supuesto, esto no es compatible con los navegadores que no utilizan el motor de renderizado Gecko.

No hay una forma rápida y fácil de cumplir con los "estándares"; Usar JavaScript es una opción.

La verdadera pregunta es, ¿por qué desea que los usuarios no puedan resaltar y presumiblemente copiar y pegar ciertos elementos? No he encontrado una sola vez que no quisiera permitir que los usuarios resalten una cierta parte de mi sitio web. Varios de mis amigos, después de pasar muchas horas leyendo y escribiendo códigos, usarán la función de resaltado como una forma de recordar en qué parte de la página se encontraban, o proporcionarán un marcador para que sus ojos sepan dónde mirar a continuación.

El único lugar donde podría ver que esto es útil es si tiene botones para formularios que no deben copiarse y pegarse si un usuario copia y pega el sitio web.

Si desea deshabilitar la selección de texto en todo excepto en los <p>elementos, puede hacerlo en CSS (tenga cuidado con lo -moz-noneque permite la anulación en subelementos, que está permitido en otros navegadores 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;
}

En las soluciones de las respuestas anteriores, la selección se detiene, pero el usuario todavía cree que puede seleccionar texto porque el cursor todavía cambia. Para mantenerlo estático, deberá configurar su cursor 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>

Esto hará que su texto sea totalmente plano, como si estuviera en una aplicación de escritorio.

Puedes hacerlo en Firefox y Safari (¿Chrome también?)

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

Solución alternativa para WebKit :

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

Lo encontré en un ejemplo de CardFlip.

Me gusta la solución híbrida CSS + jQuery.

Para hacer que todos los elementos dentro <div class="draggable"></div>no sean seleccionables, use este 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;
 }

Y luego, si está usando jQuery, agregue esto dentro de un $(document).ready()bloque:

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

Supongo que todavía desea que los elementos de entrada sean interactivos, de ahí el :not()pseudo-selector. Podrías usar'*' lugar, si no le importa.

Advertencia: es posible que Internet Explorer 9 no necesite esta pieza adicional de jQuery, por lo que es posible que desee agregar una verificación de versión allí.

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

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

Sin embargo, no es la mejor manera.

Puede usar CSS o JavaScript para eso.

El JavaScript manera se apoya en más viejos navegadores, como viejas versiones de Internet Explorer, así, pero si no es su caso, utilice el modo CSS a continuación:

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>

Para Internet Explorer, además, debe agregar pseudo clasefocus (.ClassName: focus) y 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  */
}

Intente insertar estas filas en el CSS y llame al "disHighlight" en la propiedad de clase:

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

Una actualización rápida de pirateo

Si usa el valor nonepara todas las user-selectpropiedades CSS (incluidos los prefijos del navegador), existe un problema que aún puede ocurrir.

.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           */
}

Como dice CSS-Tricks , el problema es:

WebKit aún permite copiar el texto, si selecciona elementos a su alrededor.

También puede usar el siguiente para seleccionar enforceun elemento completo, lo que significa que si hace clic en un elemento, se seleccionará todo el texto envuelto en ese elemento. Para esto, todo lo que tiene que hacer es cambiar el valor nonea 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  */
}

Para aquellos que tienen problemas para lograr lo mismo en el navegador de Android con el evento táctil, use:

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

Si está utilizando Less y Bootstrap , podría escribir:

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

Trabajando

CSS:

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

Esto debería funcionar, pero no funcionará para los navegadores antiguos. Hay un problema de compatibilidad del navegador.

Con SASS (sintaxis SCSS)

Puedes hacer esto 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;
}

En una etiqueta HTML:

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

Pruébalo en este CodePen .

Si está utilizando un corrector automático , puede eliminar otros prefijos.

Compatibilidad del navegador aquí .

Aparte de la propiedad exclusiva de Mozilla, no, no hay forma de deshabilitar la selección de texto con solo CSS estándar (a partir de ahora).

Si observa que el desbordamiento de pila no deshabilita la selección de texto para sus botones de navegación, y recomendaría no hacerlo en la mayoría de los casos, ya que modifica el comportamiento de selección normal y hace que entre en conflicto con las expectativas del usuario.

Esto funciona en algunos navegadores:

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

Simplemente agregue los elementos / identificadores deseados frente a los selectores separados por comas sin espacios, de esta manera:

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

Las otras respuestas son mejores; Esto probablemente debería verse como un último recurso / catchall.

Supongamos que hay dos divs como este:

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

Establezca el cursor en predeterminado para que le dé una sensación no seleccionable al usuario.

El prefijo debe usarse para admitirlo en todos los navegadores. Sin un prefijo, esto puede no funcionar en todas las respuestas.

Esto será útil si la selección de color tampoco es necesaria:

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

... todas las otras correcciones del navegador. Funcionará en Internet Explorer 9 o posterior.

Agregue esto al primer div en el que desea deshabilitar la selección de texto:

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

NOTA:

La respuesta correcta es correcta porque le impide poder seleccionar el texto. Sin embargo, no impide que pueda copiar el texto, como lo mostraré con las siguientes capturas de pantalla (a partir del 7 de noviembre de 2014).

Como puede ver, no pudimos seleccionar los números, pero pudimos copiarlos.

Probado en: Ubuntu , Google Chrome 38.0.2125.111.

Para obtener el resultado que necesitaba, descubrí que tenía que usar ambos ::selectionyuser-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;
}

Se hace fácilmente con:

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

Alternativamente:

Digamos que tienes un <h1 id="example">Hello, World!</h1>. Tendrás que eliminar el innerHTML de eso h1, en este caso Hello, World . Luego tendrás que ir a CSS y hacer esto:

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

Ahora simplemente piensa que es un elemento de bloque y no un texto.

Esto no es CSS, pero vale la pena mencionarlo:

jQuery UI Desactivar selección :

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

Comprueba mi solución sin 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>

Menú emergente con mi técnica aplicada: http://jsfiddle.net/y4Lac/2/

Aunque este pseudo-elemento estaba en los borradores del Selector CSS Nivel 3, se eliminó durante la fase de Recomendación del candidato, ya que parecía que su comportamiento estaba subespecificado, especialmente con elementos anidados, y no se logró la interoperabilidad.

Se discute en Cómo :: selección funciona en elementos anidados .

A pesar de que se está implementando en los navegadores, puede crear una ilusión de que el texto no se selecciona utilizando el mismo color y color de fondo en la selección que en el diseño de la pestaña (en su caso).

Diseño CSS normal

p { color: white;  background: black; }

En la selección

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

No permitir que los usuarios seleccionen el texto generará problemas de usabilidad.