¿Cómo deshabilitar resaltar la selección de texto?

Para los anclajes que actúan como botones (por ejemplo, Preguntas , Etiquetas , Usuarios , etc. en la parte superior de la página Desbordamiento de stack) o tabs, ¿existe una forma estándar de CSS para desactivar el efecto de resaltado si el usuario selecciona accidentalmente el texto?

Me doy cuenta de que esto podría hacerse con JavaScript, y un poco de google arrojó la opción Mozilla-only -moz-user-select .

¿Hay alguna manera de cumplir con este estándar con CSS, y si no, cuál es el enfoque de “mejores prácticas”?

ACTUALIZACIÓN enero de 2017:

De acuerdo con Puedo usar , la selección de user-select actualmente es compatible con todos los navegadores excepto con Internet Explorer 9 y versiones anteriores (pero lamentablemente todavía 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; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } 
 

Selectable text.

Unselectable text.

En la mayoría de los navegadores, esto se puede lograr usando variaciones propietarias en la propiedad de user-select CSS, originalmente propuesta y luego abandonada en CSS3 y ahora propuesta en CSS UI Nivel 4 :

 *.unselectable { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; /* Introduced in IE 10. See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/ */ -ms-user-select: none; user-select: none; } 

Para IE <10 y Opera <15, necesitarás usar el atributo unselectable del elemento que deseas que no se pueda seleccionar. Puede configurar esto usando un atributo en HTML:

 
...

Lamentablemente, esta propiedad no se hereda, lo que significa que debe poner un atributo en la etiqueta de inicio de cada elemento dentro de

. Si esto es un problema, podría usar JavaScript para hacer esto recursivamente 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 cruce de árbol necesita volver a ejecutarse cada vez que se agrega un nuevo elemento al árbol, pero de un comentario de @Han se desprende que es posible evitar esto agregando un controlador de evento de mousedown que establece unselectable en el objective 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 (IE y Firefox, por ejemplo) sigue siendo imposible evitar las selecciones que comienzan antes y después del elemento no seleccionable sin hacer que todo el documento no sea seleccionable.

Una solución de JavaScript para IE 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-select que ya ha encontrado. Los navegadores basados ​​en WebKit y Blink admiten la -webkit-user-select .

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

No existe una forma rápida y fácil de hacerlo compatible con los “estándares”; usar JavaScript es una opción.

La verdadera pregunta es, ¿por qué quieres que los usuarios no puedan destacar y, presumiblemente, copiar y pegar ciertos elementos? No me he encontrado ni una sola vez que quisiera que los usuarios resalten una determinada parte de mi sitio web. Varios de mis amigos, después de pasar muchas horas leyendo y escribiendo código, usarán la función resaltada como una forma de recordar dónde estaban en la página o proporcionar 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 deberían copiarse y pegarse si un usuario copia y pega el sitio web.

Si desea deshabilitar la selección de texto en todo excepto en elementos

, puede hacerlo en CSS (tenga cuidado con -moz-none que permite sobrescribir en subelementos, lo cual está permitido en otros navegadores sin 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 anteriores, la selección se detiene, pero el usuario aún cree que puede seleccionar texto porque el cursor aún 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; } 
 

Selectable text.

Unselectable text.

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

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

Solución 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 de

no se puedan seleccionar, use este CSS:

 .draggable { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-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á utilizando jQuery, agregue esto dentro de un bloque $(document).ready() :

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

Me imagino que todavía quiere que los elementos de entrada sean interactivos, de ahí el pseudo-selector :not() . Podría usar '*' en su lugar si no le importa.

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

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

Para Internet Explorer, además, debe agregar pseudo class focus (.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;/*IE*/ } 

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 estar funcionando, pero no funcionará para los navegadores antiguos. Hay un problema de compatibilidad con el navegador.

Para aquellos que tienen problemas para lograr lo mismo en el navegador 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; } 

Puede usar CSS o JavaScript para eso, el modo JavaScript es compatible en navegadores antiguos, como los antiguos IEs, pero si no es su caso, use el modo CSS y luego:

HTML / JavaScript:

   

This is the Heading!

And I'm the text, I won't be selected if you select me.

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

Si está utilizando Less y Bootstrap , puede escribir:

 .user-select(none); 

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

Si lo nota, Stack Overflow no desactiva 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 lo hace entrar en conflicto con las expectativas de un usuario.

Esto funciona en algunos navegadores:

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

Simplemente agregue sus elementos / identificadores deseados frente a los selectores separados por comas sin espacios, como sigue:

 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 div como este

 .second { cursor: default; user-select: none; -webkit-user-select: none; /* Chrome/Safari/Opera */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE/Edge */ -webkit-touch-callout: none; /* iOS Safari */ } 
 
This is my first div
This is my second div

NOTA:

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

Antes de que hayamos seleccionado algo

Después de haber seleccionado

Los números han sido copiados

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

Probado en: Ubuntu , Google Chrome 38.0.2125.111.

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

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

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 demás correcciones del navegador. Funcionará en Internet Explorer 9 o posterior.

Para obtener el resultado que necesitaba, encontré que tenía que usar tanto ::selection como ::selection user-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; } 

Esto no es CSS, pero vale la pena mencionarlo:

jQuery UI Disable Selection :

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

Aunque este pseudo-elemento estaba en los borradores de CSS Selectors Level 3, se eliminó durante la fase Candidate Recommendation, ya que parecía que su comportamiento no estaba lo suficientemente especificado, especialmente con elementos nesteds, y no se logró la interoperabilidad.

Se está discutiendo en Cómo funciona :: selection en elementos nesteds .

A pesar de que se implementa en el navegador, puede hacer una ilusión de que el texto no se seleccione utilizando el mismo color y color de fondo en la selección a partir del diseño de la pestaña (en su caso).

Diseño de 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.

Verifique mi solución sin JavaScript:

jsFiddle

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

He aprendido del sitio web CSS-Tricks .

 user-select: none; 

Y esto también:

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

Actualización rápida de hack: marzo de 2017 -desde CSS-Tricks

Si coloca el valor “ninguno” para todos los atributos de selección de usuario de CSS como se muestra a continuación, existe un problema que todavía puede ocurrir.

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

Como CSS-Trick dice que el problema es

  • WebKit todavía permite copiar el texto si selecciona elementos a su alrededor.

Por lo tanto, también puede usar la siguiente en lugar de forzar que se seleccione un elemento completo, que es la solución para el problema. Todo lo que tienes que hacer es cambiar el valor ‘ninguno’ por ‘todo’, que se vería así

 .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 */ } 
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; 

Intenta usar este:

 ::selection { background: transparent; } 

Y si desea especificar no seleccionar dentro de un elemento específico, simplemente coloque la clase de elemento o ID antes de la regla de selección, como por ejemplo:

 .ClassNAME::selection { background: transparent; } #IdNAME::selection { background: transparent; }