40 Pregunta: ¿Cómo deshabilitar el resaltado de selección de texto?

pregunta creada en Sun, May 12, 2019 12:00 AM

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

Me doy cuenta de que esto se puede hacer con JavaScript, y un poco de Google dio como resultado la opción -moz-user-select solo para Mozilla.

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

    
4776
  1. ¿pueden los elementos dentro del elemento que el resaltado tiene deshabilitado, tener resaltado habilitado en css en el estilo o atributo de clase? o en otras palabras, hay otros valores para -webkit-user-select ect. aparte de ninguno?
    2011-03-14 21: 18: 15Z
  2. Relacionado: stackoverflow.com/questions/16600479/… = cómo permitir que solo algunos de los elementos secundarios sean seleccionado
    2013-05-17 02: 36: 13Z
  3. Hay un error en algunos navegadores donde al hacer "Seleccionar todo" (CTRL + A y CMD + A) aún se seleccionan las cosas. Esto se puede combatir con un color de selección transparente: ::selection { background: transparent; } ::-moz-selection { background: transparent; }
    2014-12-12 01: 03: 56Z
  4. Puedo decir: por favor no hagas esto. Desde mi experiencia, la mayoría de las veces quiero seleccionar un texto que también sirva como botón, para copiarlo y pegarlo en otro lugar. Sería inimaginablemente molesto no poder hacer eso porque algunos desarrolladores web hicieron todo lo posible para deshabilitar esta función para mí. Así que, por favor, no hagas esto a menos que tengas una muy buena, muy buena razón.
    2016-08-30 20: 10: 51Z
  5. @ cram2208 Estoy de acuerdo, excepto que la otra pregunta vinculada es el duplicado. Esta pregunta es más antigua y tiene más /mejores respuestas.
    2016-12-15 19: 14: 23Z
30 Respuestas                              30                         

ACTUALIZACIÓN, enero de 2017:

Según ¿Puedo usar , el user-select actualmente 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; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

Tenga en cuenta que es una característica no estándar (es decir, no es parte de ninguna especificación). 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.


Puede encontrar más información en documentación de la Red de desarrolladores de Mozilla .

    
6862
2018-10-31 15: 02: 48Z
  1. buen código molokoloco: D, aunque personalmente me mantendría alejado de su uso, ya que a veces es posible que necesite diferentes valores para diferentes navegadores, y se basa en JavaScript. Hacer una clase y agregarlo a su elemento o aplicar el css a su tipo de elemento en su hoja de estilo es una prueba bastante importante.
    2011-01-14 13: 07: 07Z
  2. 'user-select'- Values: none | texto | alternar elemento | elementos | todo | heredar - w3.org/TR/2000/WD-css3-userint-20000216
    2011-03-21 09: 44: 40Z
  3. En realidad, -o-user-select no está implementado en Opera. En su lugar, implementa el atributo no seleccionable de IE.
    2011-07-03 10: 52: 17Z
  4. Por alguna razón, esto solo no funcionaba en IE8, luego agregué <div onselectstart="return false;"> a mi división principal.
    2012-01-20 08: 11: 49Z
  5. ¡esto es ridículo! Tantas formas diferentes de hacer lo mismo. Hagamos un nuevo estándar para las selecciones de usuarios. Lo llamaremos standard-user-select. entonces no tendremos estos problemas aunque para la compatibilidad hacia atrás deberíamos incluir los otros también. Así que ahora el código se convierte en -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; standard-user-select: none;. ah, mucho mejor.
    2012-09-04 16: 19: 11Z

En la mayoría de los navegadores, esto se puede lograr usando variaciones propietarias en la propiedad CSS user-select, originalmente propuesto y luego abandonado en CSS3 y ahora propuesto en CSS UI Level 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, deberá utilizar el atributo unselectable del elemento que desea que no se pueda seleccionar. Puedes configurarlo 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, en su lugar, 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 recorrido del árbol debe volver a ejecutarse cada vez que se agregue un nuevo elemento al árbol, pero de un comentario de @Han parece que es posible evitarlo. por agregando un controlador de eventos mousedown que establece unselectable en el destino del evento. Consulte http://jsbin.com/yagekiji/1 para obtener más información.


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

    
794
2015-08-03 08: 51: 02Z
  1. debe eliminar el * selector de su ejemplo, es realmente ineficiente y realmente no hay necesidad de usarlo en su ejemplo, ¿verdad?
    2011-01-14 13: 15: 46Z
  2. @ Blowsie: No lo creo: la especificación de CSS 2 indica que *.foo y .foo son precisamente equivalentes (en el segundo caso, el selector universal (*) es implícito), por lo que, salvo las peculiaridades del navegador, no veo que incluir el * dañará el rendimiento. Es un hábito mío desde hace mucho tiempo incluir el *, que originalmente comencé a hacer para facilitar la lectura: declara explícitamente de un vistazo que el autor pretende hacer coincidir todos los elementos.
    2011-01-14 13: 24: 43Z
  3. oooh después de una lectura adicional, parece que * no es eficiente cuando se usa como clave (el selector más a la derecha), es decir, .unselectable *. Más información aquí code.google.com/speed/page-speed /docs /…
    2011-01-14 13: 49: 02Z
  4. En lugar de usar la clase = "unselectable", simplemente use el selector de atributo [unselectable = "on"] {...}
    2012-01-26 19: 39: 16Z
  5. @ Francisc: No. Como dije a Blowsie anteriormente en el commenTs, no hace precisamente ninguna diferencia.
    2012-04-25 09: 32: 26Z

Una solución de JavaScript para IE es

 
onselectstart="return false;"
    
181
2012-03-28 20: 10: 06Z
  1. ¡No te olvides de ondragstart!
    2010-05-26 13: 25: 39Z
  2. una cosa más aquí. Si agrega eso al cuerpo, no podrá seleccionar texto dentro de áreas de texto o campos de entrada en IE. La forma en que lo arreglé para IE. body.onselectstart = function(e) { if (e.target.nodeName != "INPUT" && e.target.nodeName != "TEXTAREA") { e.preventDefault(); return false; } return true; }
    2013-05-30 16: 56: 05Z
  3. Esto se puede agregar como un atributo usando jQuery - $("p"). attr ("onselectstart", "return false") Este fue el único método confiable para yo en IE8
    2013-06-05 15: 06: 46Z
  4. por qué utilizo javascript cuando tengo varias soluciones css! ..
    2013-10-31 10: 43: 03Z
  5. @ Abudayah porque no funcionan en versiones anteriores de Internet Explorer? Eso es, como, todo el punto de esta respuesta.
    2013-10-31 13: 27: 22Z

Hasta que el CSS 3 user-select la propiedad está disponible, los navegadores basados ​​en Gecko son compatibles con la propiedad -moz-user-select que ya encontró. WebKit y los navegadores basados ​​en Blink admiten la propiedad -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 cumplir con los "estándares" para hacerlo; usar JavaScript es una opción.

La verdadera pregunta es, ¿por qué quieres que los usuarios no puedan resaltar y presumiblemente copiar y pegar ciertos elementos? No he encontrado ni una sola vez que no haya querido que los usuarios resalten una parte determinada de mi sitio web. Varios de mis amigos, después de pasar muchas horas leyendo y escribiendo códigos, utilizarán la función de resaltado 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 ser útil es que tenga botones para formularios que no deben copiarse y pegarse si un usuario copia y pega el sitio web.

    
176
2016-04-17 05: 17: 40Z
  1. El tema de los botones sería exactamente mi motivación.
    2009-05-05 20: 47: 17Z
  2. Otra razón por la que es necesario es hacer clic con la tecla Mayús presionada para seleccionar varias filas en una cuadrícula o tabla. No desea resaltar el texto, desea que seleccione las filas.
    2010-01-06 16: 08: 11Z
  3. También hay problemas legales en los que el contenido de otra persona se está reeditando legalmente, pero una cláusula en la licencia requiere que los editores web eviten que el texto se copie y pegue fácilmente. Esto es lo que me llevó a encontrar esta pregunta. No estoy de acuerdo con el requisito, pero la empresa que estoy contratando está legalmente obligada a implementarlo de esta manera.
    2011-03-15 20: 34: 20Z
  4. @ CraigM El estilo css no impide que una persona tome la fuente HTML y la copie. Si quieres proteger tu contenido, tendrás que encontrar mejores formas.
    2013-12-26 23: 25: 50Z
  5. Aplicación web altamente interactiva con mucho arrastre y amp; soltar ... el resaltado accidental es un gran problema de usabilidad.
    2014-06-03 21: 08: 07Z

Si desea deshabilitar la selección de texto en todo excepto en los elementos <p>, puede hacer esto en CSS (tenga cuidado con el -moz-none que permite anular elementos secundarios, que se permite 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;
}
    
129
2013-10-29 17: 09: 31Z
  1. Asegúrate de que también puedes seleccionar los campos de entrada: p, input { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text; }
    2011-07-07 22: 39: 56Z
  2. Tenga mucho cuidado al desactivar las expectativas de IU del navegador en TODOS los códigos, excepto en un elemento. ¿Qué pasa con los elementos de lista < li /> texto, por ejemplo?
    2011-11-12 07: 13: 45Z
  3. Solo una actualización ... de acuerdo con MDN ya que Firefox 21 -moz-none y none son iguales.
    2013-12-25 15: 56: 37Z
  4. Para esto, puede agregar cursor: predeterminado y cursor: texto respectivamente:)
    2014-07-14 17: 14: 41Z

En la selección de soluciones anterior, se detiene, pero el usuario aún cree que puede seleccionar texto porque el cursor aún cambia. Para mantenerlo estático, tendrás que configurar tu 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 completamente plano, como si estuviera en una aplicación de escritorio.

    
117
2016-09-10 04: 18: 34Z
  1. "Flat" en lugar de qué?
    2018-02-09 20: 55: 53Z
  2. @ kojow7 En lugar de "layered". En lugar de texto flotando encima de los otros elementos. Es similar a la diferencia entre las imágenes SVG y PNG.
    2018-09-19 09: 35: 59Z
  3. Se sorprendió al descubrir que Firefox aún requiere el prefijo de proveedor en 2019. Usé con indiferencia solo user-select: none;, pensando que el estándar ya estaría adoptado, pero lamentablemente no lo hizo. Hace que te preguntes qué personas del comité de normas aún podrían estar debatiendo. "No, chicos ... yo realmente creo que debería ser user-select: cant; porque es más descriptivo, ¿sabes?" "Ya hemos pasado por esto, Mike. ¡Tendríamos que omitir el apóstrofe, y eso es una mala forma!" "¡Suficiente, todos! Volveremos a deliberar sobre este asunto el próximo mes. ¡Se levantó la sesión del Comité de Normas!"
    2019-05-24 03: 19: 36Z

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

 
::selection { background: transparent; }
::-moz-selection { background: transparent; }
    
103
2013-10-29 17: 09: 38Z
  1. No recomendaría hacer esto, porque en realidad no soluciona el problema; Deshabilitando la selección de texto - simplemente lo oculta. Esto puede llevar a una mala capacidad de uso, porque si arrastro mi cursor por la página, podría estar seleccionando cualquier texto arbitrario sin saberlo. Esto puede causar todo tipo de "errores" de usabilidad extraños.
    2011-02-02 15: 01: 40Z
  2. No funciona en imágenes PNG con áreas transparentes: siempre se seleccionará en azul claro ... ¿Hay alguna solución?
    2013-09-18 21: 12: 27Z

Solución para WebKit :

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

Lo encontré en un ejemplo de CardFlip.

    
76
2013-10-29 17: 09: 46Z
  1. El uso de transparent en lugar de rgba también funciona en Chrome 42 en Android.
    2015-04-29 20: 46: 35Z

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

Para hacer que todos los elementos dentro del <div class="draggable"></div> no sean seleccionables, 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 quieres que todos los elementos de entrada sean interactables, 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 adicional de jQuery, por lo que es posible que desee agregar una versión de prueba allí.

    
68
2013-10-29 17: 09: 54Z
  1. Use -ms-user-select: none; (para IE10) y su jQuery "if" debe ser esto: if (($.browser.msie & & $.browser.version < 10) || $.browser.opera)
    2013-01-31 03: 42: 15Z
  2. ¡¡¡Cuidado, hombre !!! Para que sea seleccionable en Firefox debes usar -moz-user-select: Normal;
    2013-03-10 16: 53: 37Z
  3. 2013-03-11 13: 44: 40Z
  4. @ mhenry1384 jQuery.browser ha quedado obsoleto a partir de la versión 1.3 y se eliminó en la versión 1.9 - api.jquery.com/jQuery.browser
    2013-03-14 23: 58: 05Z
  5. @ Punto de Wynand Good. Pero, ¿qué tipo de "detección de características" existe para determinar qué propiedad CSS usar?
    2013-03-15 13: 28: 36Z

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

    
66
2017-06-16 02: 37: 53Z
  1. También puedes usar title como atributo.
    2014-05-07 16: 50: 34Z
  2. Esa es una solución muy creativa. Especialmente si usó el atributo de título porque probablemente sería mejor para los lectores de pantalla.
    2014-09-16 21: 49: 55Z
  3. Lo probé ( JSBin ) y no funciona en IE. Desafortunadamente, las IEs antiguas son las únicas en las que user-select no funciona.
    2014-09-16 21: 58: 23Z
  4. ¡Esta es una excelente alternativa sin JS que funciona en Chrome! ¡Impresionante!
    2018-11-06 15: 05: 40Z

Puedes usar CSS o JavaScript para eso, JavaScript es compatible con los navegadores más antiguos, como Old IEs, pero si no lo está En tu caso, usa la forma CSS entonces:

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>
    
63
2018-05-14 13: 52: 42Z
  1. La versión de javascript no funciona completamente como estaba previsto. Si comienza a seleccionar debajo del texto y luego mueve el cursor hacia arriba, el texto se seleccionará bien.
    2018-05-14 13: 48: 05Z
  2. @ Gh61 se debió a que se aplicó al cuerpo y el fragmento de código de ejecución crea una etiqueta html a su alrededor, así que si se aplica a < html > lo hará, mira la actualización
    2018-05-14 13: 54: 13Z

Además, para Internet Explorer, 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*/
}
    
58
2014-11-26 00: 29: 02Z
  1. Esto funciona en IE siempre que la selección comience en un elemento con la clase className. Consulte este JSBin .
    2014-09-16 22: 01: 32Z

Intente insertar estas filas en CSS y llame a "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;
}
    
57
2018-11-30 10: 48: 04Z
  1. Parece una copia de la respuesta aceptada, excepto que agregó cursor: default en el medio, por alguna razón. El interrogador no solicitó que el cursor se configurara en default.
    2016-12-13 09: 22: 29Z
  2. Mi código fuente.
    2016-12-13 11: 20: 59Z
  3. Puede haber escrito, sin embargo, el código general es una copia directa de esto, en la primera página de este hilo: stackoverflow.com/a/4407335/3016335 .
    2016-12-13 13: 36: 52Z
 
-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');
    
47
2013-10-29 17: 11: 03Z

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;
}
    
47
2016-04-17 04: 53: 43Z
  1. @ Volker E. bueno, él dice que es solo para el navegador de Android, puedes agregarlo a las otras respuestas en lugar de ser sarcástico.
    2016-01-07 21: 33: 05Z

Trabajo

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

    
47
2016-04-17 04: 58: 37Z
  1. La propiedad CSS sin prefijo debe estar estrictamente al final de la lista de versiones con prefijo de la propiedad. Es una buena práctica, otra es una mala práctica hacer un "nuevo IE" de Chrome /Webkit y conducir a tantas UGLY THINGS como la introducción del soporte de prefijo -webkit en navegadores que no sean de webkit. Mira, esto ya estaba en 2012: dev.opera.com /articles /…
    2017-03-21 22: 52: 27Z
  2. Y cito: This is because through our site compatibility work, we have experienced that many authors of (especially mobile) sites only use -webkit- prefixed CSS, thereby ignoring other vendor prefixes and not even including an unprefixed equivalent. This leads to a reduced user experience on Opera and Firefox, which don’t receive the same shiny effects such as transitions, gradients and the like, even if the browser supported those effects.
    2017-03-21 22: 52: 47Z

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

 
.user-select(none);
    
46
2016-04-17 05: 09: 44Z

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

Si se da cuenta, el Desbordamiento de pila 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 hace que esté en conflicto con las expectativas de un usuario.

    
34
2009-05-05 20: 38: 05Z
  1. Aunque estoy de acuerdo en que cambia el comportamiento que el usuario espera, tendría sentido para cosas como el botón "Agregar comentario" que se encuentra al lado de este campo de formulario ...
    2009-05-05 20: 40: 33Z
  2. ¿Pero eso no expone detalles de implementación innecesarios? No se puede seleccionar el texto de una entrada o botón.
    2009-05-05 20: 40: 46Z
  3. @ anon: Es probable que la mayoría de los usuarios no intenten seleccionar el texto de su botón, por lo que en la práctica, no debería importar mucho. Además, para hacerlo, deberán comenzar a seleccionar fuera del botón: si hacen clic dentro del botón, el controlador onclick se activará. Además, ciertos navegadores (por ejemplo, Safari) en realidad te permiten seleccionar el texto de los botones normales ...
    2009-05-05 20: 49: 07Z
  4. Si está seleccionando un conjunto de comentarios de un hilo de chat y cada comentario tiene un botón upvote /downvote al lado, sería bueno seleccionar el texto sin las otras cosas Eso es lo que el usuario espera o quiere. No quiere copiar /pegar las etiquetas de los botones con cada comentario.
    2013-08-03 16: 52: 21Z
  5. Y si, por ejemplo, hace doble clic en un extremo¿En qué lugar de redirigirte a otra página se abre un div? entonces el texto para el botón se seleccionará debido al doble clic!
    2014-07-25 11: 32: 26Z

Esto funciona en algunos navegadores:

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

Simplemente agregue sus elementos /ID deseados delante de 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.

    
33
2016-04-17 04: 54: 48Z
  1. Hay algunas cosas que se pueden saber con seguridad, pero esta solución definitivamente no funciona en todos los navegadores.
    2014-09-30 09: 27: 40Z
  2. por qué dice todos los navegadores ... claramente puede editar mejor su respuesta
    2014-11-13 14: 03: 21Z
  3. @ scx el objetivo de la respuesta era proporcionar un punto de partida. Como puedes ver, hay mejores respuestas que las mías de todos modos. Si tengo tiempo para intentarlo de nuevo en el futuro, experimentaré y veré qué puedo hacer.
    2014-11-14 11: 13: 01Z

Supongamos que hay dos div como esta

 
.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 */
}
<div class="first">
  This is my first div
</div>

<div class="second">
  This is my second div
</div>

Establezca el cursor en el valor predeterminado para que le brinde una sensación no seleccionable al usuario /

  

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

    
32
2016-06-24 11: 57: 45Z

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.

    
29
2016-04-17 05: 01: 40Z
  1. Haz el color: inherit; tal vez.
    2016-07-28 01: 25: 09Z
  2. sí, me encanta. Es el selector de nivel 3 css según documentos de Mozilla
    2018-01-28 10: 37: 47Z

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

 
onmousedown='return false;' 
onselectstart='return false;'
    
28
2013-03-10 19: 58: 20Z

NOTA:

La respuesta correcta es correcta, ya que le impide poder seleccionar el texto. Sin embargo, no le impide poder copiar el texto, como lo mostraré en el próximo par de capturas de pantalla (a partir del 7 de noviembre de 2014).

Antes de que hayamos seleccionado algo

Después de que hayamos seleccionado

Los números se han copiado

Como puede ver, no pudimos seleccionar los números, pero sí pudimos copiary ellos.

Probado en: Ubuntu , Google Chrome 38.0.2125.111.

    
28
2016-04-17 04: 52: 51Z
  1. He tenido el mismo problema. En Mac Chrome 48.0.2564.116 y en Mac Safari 9.0.3. Cabe destacar que Mac Firefox 43.0 no copia el personaje, sino que pega líneas finales extra entre ellos. ¿Qué se debe hacer al respecto?
    2016-03-05 01: 34: 58Z

Actualización de pirateo rápido: marzo de 2017 -desde Trucos de CSS

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 aún 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 que el texto se copie si selecciona elementos    alrededor de él.

Por lo tanto, también puede usar el siguiente para hacer que se seleccione un elemento completo, que es la solución al problema. Todo lo que tiene que hacer es cambiar el valor 'ninguno' a 'todos', 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 */   
}
    
27
2019-05-11 16: 57: 45Z

Para obtener el resultado que necesitaba, encontré que tenía que usar tanto ::selection como 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; 
}
    
24
2016-01-15 08: 24: 09Z

Esto no es CSS, pero vale la pena mencionar:

jQuery UI Disable Selection :

 
$("your.selector").disableSelection();
    
22
2013-04-09 16: 42: 23Z
  1. En desuso a partir de la versión 1.9 ...
    2013-06-18 21: 18: 15Z

Aunque este pseudo-elemento estaba en los borradores del nivel 3 de los selectores de CSS, se eliminó durante la fase de recomendación del candidato, ya que parecía que su comportamiento no estaba bien especificado, especialmente con elementos anidados, y no se logró la interoperabilidad. /p>

Se está discutiendo en Cómo funciona: la selección en elementos anidados .

A pesar de que se está implementando en el navegador, puede hacer 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 planteará problemas de uso.

    
21
2016-04-17 04: 57: 31Z
  1. ¡Esta debe ser la razón por la que Netbeans no complete de qué estoy hablando!
    2014-04-26 20: 16: 19Z

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/

    
21
2016-04-17 05: 00: 08Z

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;}
    
15
2016-04-01 11: 16: 39Z

Hecho fácilmente con:

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

alternativamente:

Supongamos que tiene un <h1 id="example">Hello, World!</h1>, lo que tendrá que hacer es eliminar el HTML interno de ese h1: en este caso, Hola, Mundo . Entonces tendrás que ir a css y hacer esto:

 
#example::before //You can ofc 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.

    
14
2018-11-20 18: 57: 48Z
fuente colocada aquí