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

Para anclas que actúan como botones (por ejemplo Preguntas, Etiquetas, Usuari@s, etc.que se encuentran en la parte superior de la página Stack Overflow) o pestañas, ¿existe una 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 podría hacer con JavaScript y un poco de búsqueda en Google dio como resultado el solo Mozilla -moz-user-select .

¿Existe una forma compatible con los estándares de lograr esto con CSS y, de no ser así, cuál es el enfoque de "mejores prácticas"?

preguntado el 05 de mayo de 09 a las 20:05

¿Los elementos dentro del elemento que tienen el resaltado deshabilitado, tienen el resaltado habilitado en CSS en el atributo de estilo o clase? o en otras palabras, ¿hay otros valores para -webkit-user-select ect? aparte de ninguno? -

Relacionado: stackoverflow.com/questions/16600479/… = cómo permitir que solo se seleccionen algunos de los elementos secundarios -

Hay un error en algunos navegadores donde hacer "Seleccionar todo" (CTRL + A y CMD + A) todavía selecciona cosas. Esto se puede combatir con un color de selección transparente: ::selection { background: transparent; } ::-moz-selection { background: transparent; } -

¿Puedo simplemente decir: por favor no hagas esto? Según mi experiencia, la mayoría de las veces realmente quieres para seleccionar algún texto que también sirva como botón, para copiarlo y pegarlo en otro lugar. Sería inimaginablemente exasperante no poder hacer eso porque algún desarrollador web hizo todo lo posible para deshabilitar esta función a propósito para mí. Así que no hagas esto a menos que tengas un buena razón. -

En el año 2017, es mejor forma de usar postcss y los autoprefixer y configure la versión del navegador, luego postcss hacer que todo se enfríe. -

30 Respuestas

ACTUALIZACIÓN Enero de 2017:

Según Puedo usar,la user-select actualmente es compatible con todos los navegadores excepto Internet Explorer 9 y sus versiones anteriores (pero lamentablemente posible necesita un prefijo de proveedor).


Estas son todas las variaciones de CSS correctas disponibles:

.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 en cuenta que user-select 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. Además, los navegadores pueden dejar de admitirlo en el futuro.


Puede encontrar más información en Documentación de Mozilla Developer Network.

Respondido el 15 de Septiembre de 20 a las 15:09

Buen código molokoloco: D, aunque personalmente me mantendría alejado de usarlo, ya que a veces es posible que necesite valores diferentes para diferentes navegadores, y se basa en JavaScript. Hacer una clase y agregarla a su elemento o aplicar el CSS a su tipo de elemento en su hoja de estilo es bastante a prueba de balas. - Blowsie

'user-select'- Valores: ninguno | texto | alternar | elemento | elementos | todo | heredar - w3.org/TR/2000/WD-css3-userint-20000216 - Blowsie

¡esto es ridículo! tantas formas diferentes de hacer lo mismo. hagamos un nuevo estándar para las selecciones del usuario. lo llamaremos standard-user-select. entonces no tendremos estos problemas. aunque por compatibilidad con versiones anteriores también deberíamos incluir los demás. 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. - Claudiu

En la mayoría de los navegadores, esto se puede lograr utilizando variaciones propietarias del CSS. user-select propiedad, propuesto originalmente y luego abandonado en CSS 3 y ahora propuesto en CSS UI de 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, necesitará utilizar el unselectable atributo 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, puede 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 parece, a partir de un comentario de @Han, que es posible evitarlo agregando un mousedown controlador de eventos que establece unselectable en 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) sigue siendo imposible evitar selecciones que comienzan antes y terminan después del elemento no seleccionable sin hacer que todo el documento no sea seleccionable.

respondido 24 nov., 19:15

debe eliminar el selector * de su ejemplo, es realmente ineficiente y realmente no hay necesidad de usarlo en su ejemplo, ¿verdad? - Blowsie

@Blowsie: No lo creo: la especificación CSS 2 establece que *.foo y los .foo son precisamente equivalentes (en el segundo caso, el selector universal (*) está implícito), por lo que, salvo las peculiaridades del navegador, no veo que eso incluya el * perjudicará el rendimiento. Es un hábito mío desde hace mucho tiempo incluir el *, que originalmente comencé a hacer para mejorar la legibilidad: establece explícitamente de un vistazo que el autor tiene la intención de hacer coincidir todos los elementos. - Tim Down

oooh después de leer un poco más, parece que * solo es poco eficiente cuando se usa como clave (el selector más a la derecha), es decir, no se puede seleccionar *. Más información aquí code.google.com/speed/page-speed/docs/… - Blowsie

En lugar de usar class = "unselectable", simplemente use el selector de atributos [unselectable = "on"] {…} - Chris Calo

Hasta CSS 3 selección de usuario la propiedad está disponible, Gecolos navegadores basados ​​en -moz-user-select propiedad que ya encontraste. WebKit y los navegadores basados ​​en Blink son compatibles -webkit-user-select propiedad.

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

No existe una forma rápida y fácil que cumpla con los "estándares"; usar JavaScript es una opción.

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

El único lugar donde pude 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.

Respondido 17 Abr '16, 08:04

Lo de los botones sería exactamente mi motivación. - Kriem

Esto puede ser necesario para dispositivos integrados. es decir, un dispositivo en el que se utiliza un navegador para representar la interfaz de usuario. - Tim Kersten

Otra razón por la que esto es necesario es Mayús-clic para seleccionar varias filas en una cuadrícula o tabla. No desea resaltar el texto, desea que seleccione las filas. - Gordon Tucker

Aplicación web altamente interactiva con mucho arrastrar y soltar ... el resaltado accidental es un gran problema de usabilidad. - Marc Hughes

Una solución de JavaScript para Internet Explorer es:

onselectstart="return false;"

Respondido 31 Jul 19, 22:07

No te olvides de ondragstart! - Mathias Bynens

Si desea deshabilitar la selección de texto en todo excepto en <p> elementos, puede hacer esto en CSS (tenga cuidado con los -moz-none que permite anular 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;
}

Respondido 29 Oct 13, 21:10

Asegúrese también de hacer que los campos de entrada sean seleccionables: p, input { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text; } - Joshuadelange

Tenga mucho cuidado al desactivar las expectativas de la interfaz de usuario del navegador en TODO el código, excepto en un elemento. ¿Qué pasa con los elementos de la lista? texto, por ejemplo? - Jason T Featheringham

Solo una actualización ... según MDN desde Firefox 21 -moz-none y los none son lo mismo. - Kevin Fegan

Para esto, puede agregar cursor: predeterminado y cursor: texto respectivamente:) - T4NK3R

THE bomba. Es decir. EL FIN. ul>* { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -o-user-select: none; user-select: none; } [selecciona todo en una lista desordenada y lo hace no seleccionable, en lugar de destruir todo el árbol de vistas] Gracias por la lección. Mi lista de botones se ve muy bien y responde correctamente al tocar y presionar la pantalla, en lugar de iniciar un IME (widgets del portapapeles de Android). - Sistemas Hypersoft

En las soluciones de las respuestas anteriores, la selección se detiene, pero el usuario aún piensa 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;
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

Esto hará que su texto sea totalmente plano, como lo sería en una aplicación de escritorio.

respondido 02 nov., 19:17

¿"Plano" en contraposición a qué? - kojow7

@ kojow7 A diferencia de "en capas". En lugar de texto flotando sobre los otros elementos. Es similar a la diferencia entre imágenes SVG y PNG. - Yeti

Me sorprendió descubrir que Firefox todavía requiere el prefijo de proveedor en 2019. Sin tener en cuenta, usé solo user-select: none;, pensando que el estándar ya se habría adoptado, pero lamentablemente no es así. Hace que uno se pregunte qué podría estar debatiendo todavía la gente del comité de normas. "No, chicos ... yo realmente creo que debería ser user-select: cant; porque es más descriptivo, ¿sabes? —Hemos hablado de esto, Mike. Tendríamos que omitir el apóstrofe, ¡y eso es de mala forma! "" ¡Basta, todos! Volveremos a deliberar sobre este asunto el próximo mes. ¡Se aplazó la reunión del Comité de Normas! "- Mentalista

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

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

Respondido 29 Oct 13, 21:10

No recomendaría hacer esto, porque en realidad no soluciona el problema; deshabilitar la selección de texto, simplemente lo oculta. Esto puede llevar a una mala usabilidad, porque si arrastro el cursor por la página podría estar seleccionando cualquier texto arbitrario sin saberlo. Esto puede causar todo tipo de "errores" extraños de usabilidad. - Keithamus

No funciona en imágenes PNG con áreas transparentes: siempre seleccionará en azul claro ... ¿Alguna solución? - AvL

Solución alternativa para WebKit:

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

Lo encontré en un ejemplo de CardFlip.

respondido 24 nov., 19:15

Usar transparent en lugar de rgba también funciona en Chrome 42 en Android. - Clint Pachl

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

Para hacer todos los elementos dentro <div class="draggable"></div> no seleccionable, 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 quieres que los elementos de entrada sean interactivos, de ahí el :not() pseudo-selector. Podrías usar '*' en cambio, si no te 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í.

Respondido 15 Abr '20, 23:04

Utilice -ms-user-select: none; (para IE10) y su jQuery "if" debería ser esto: if (($ .browser.msie && $ .browser.version <10) || $ .browser.opera) - mhenry1384

¡¡¡Cuidado hombre !!! Para que sea seleccionable en Firefox debes usar -moz-user-select: Normal; - Nicolas Thery

@ mhenry1384 jQuery.browser ha quedado obsoleto a partir de la versión 1.3 y se ha eliminado en la versión 1.9 - api.jquery.com/jQuery.browser - WynandB

@Wynand Buen punto. Pero, ¿qué tipo de "detección de características" existe para determinar qué propiedad CSS usar? - Tom Auger

@TomAuger Puede usar jQuery.support, le permite verificar características únicas: Enlace - Aequanox

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

Respondido el 16 de junio de 17 a las 05:06

También podrías usar title como atributo. - Cepillo de dientes

Esa es una solución muy creativa. Especialmente si usaba el atributo de título porque probablemente sería mejor para los lectores de pantalla. - pseudoavant

Lo intenté (JSBin) y no funciona en IE. Desafortunadamente, las IE más antiguas son las únicas que user-select no funciona para. - pseudoavant

¡Esta es una excelente alternativa sin JS que funciona en Chrome! ¡Impresionante! - saricden

Puede usar el CO or JavaScript para eso.

El JavaScript es compatible con mayor navegadores, como los ancianos versiones de Internet Explorer también, pero si no es su caso, use 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>

respondido 24 nov., 19:17

Para Internet Explorer, además, debe agregar pseudo clase 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; /* Internet Explorer  */
}

respondido 24 nov., 19:16

Esto funciona en IE siempre que la selección comience en un elemento con el className clase. Mira esto JSBin. - pseudoavant

Intente insertar estas filas en el CSS y llame a la propiedad "disHighlight" en la 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;
}

respondido 24 nov., 19:16

Una actualización rápida de Hack

Si usa el valor none para todo el CSS user-select propiedades (incluidos los prefijos del navegador), existe un problema que aún puede ocurrir con esto.

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

As Trucos CSS dice el problema es:

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

También puede utilizar el siguiente para enforce que se selecciona un 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 tienes que hacer es cambiar el valor none a 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  */
}

respondido 24 nov., 19:17

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

respondido 24 nov., 19:16

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>

Inténtalo en este CodePen.

Si estás usando un autoprefixer puede eliminar otros prefijos.

Compatibilidad del navegador aquí.

contestado el 08 de mayo de 20 a las 11:05

Si está utilizando Menos y los Bootstrap podrías escribir:

.user-select(none);

Respondido 17 Abr '16, 08:04

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

respondido 24 nov., 19:16

Acoplar

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. Existe un problema de compatibilidad del navegador.

respondido 24 nov., 19:16

La propiedad CSS sin prefijo debe estar estrictamente al final de la lista de versiones prefijadas de la propiedad. Es una buena práctica correcta, otra es una mala práctica hacer un "nuevo IE" desde Chrome / Webkit y conducir a tantas COSAS FEAS como introducir la compatibilidad con el prefijo -webkit en navegadores que no sean webkit. Mira, esto ya fue en 2012: dev.opera.com/articles/… - FlameStorm

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

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

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

contestado el 06 de mayo de 09 a las 00:05

Si bien estoy de acuerdo en que cambia el comportamiento que espera el usuario, tendría sentido para cosas como el botón "Agregar comentario" que se encuentra junto a este campo de formulario ... - X-Istence

¿Pero eso no expone detalles de implementación innecesarios? No se puede seleccionar una entrada o el texto de un botón. - anon

@anon: La mayoría de los usuarios probablemente no intentarán seleccionar el texto de su botón, por lo que en la práctica no debería importar mucho. Además, para ello deberán empezar a seleccionar afuera del botón: si hacen clic dentro del propio botón, el controlador onclick se activará en su lugar. Además, ciertos navegadores (por ejemplo, Safari) le permiten seleccionar el texto de los botones normales ... - hbw

Si está seleccionando un conjunto de comentarios de un hilo de chat y cada comentario tiene un botón de voto a favor / en contra 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. - Mnebuerquo

¿Y si, por ejemplo, hace doble clic en un botón que, en lugar de redirigirlo a otra página, abre un div? ¡entonces el texto del botón será seleccionado debido al doble clic! - Gigala

Esto funciona en algo navegadores:

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

Simplemente agregue sus elementos / identificadores deseados delante de los selectores separados por comas sin espacios, así:

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 / solución general.

Respondido 17 Abr '16, 07:04

Hay pocas cosas que se pueden saber con certeza, pero esta solución definitivamente no funciona en todos navegadores. - Volker E.

Supongamos que hay dos divs así:

.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 el valor predeterminado para que le dé una sensación no seleccionable al usuario.

Es necesario utilizar el prefijo para admitirlo en todos los navegadores. Sin un prefijo, es posible que esto no funcione en todas las respuestas.

respondido 02 nov., 19:17

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 después.

Respondido 17 Abr '16, 08:04

Haz eso color: inherit; quizás. - Yaakov Ainspan

sí, lo amo. Es el selector css de nivel 3 según Documentos de Mozilla - Bariq Dharmawan

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

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

respondido 10 mar '13, 23:03

NOTA:

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

Antes de que hayamos seleccionado nada

Después de haber seleccionado

Los números se han copiado

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

Probado en: Ubuntu, Google Chrome 38.0.2125.111.

Respondido 17 Abr '16, 07:04

Tuve el mismo problema. En Mac Chrome 48.0.2564.116 y en Mac Safari 9.0.3. En particular, Mac Firefox 43.0 no copia el personaje, pero coloca líneas finales adicionales entre ellos. ¿Qué se debe hacer al respecto? - NHDaly

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

respondido 24 nov., 19:16

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 HTML interno de ese h1, en este caso Hola Mundo. Entonces 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 texto.

respondido 24 nov., 19:17

Esto no es CSS, pero vale la pena mencionarlo:

jQuery UI Desactivar selección:

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

Respondido 09 Abr '13, 20:04

Verifique 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/

Respondido 17 Abr '16, 08:04

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

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

A pesar de que se está implementando en los navegadores, puede hacer una ilusión de que el texto no está seleccionado usando 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.

respondido 24 nov., 19:16

¡Esta debe ser la razón por la que la finalización automática de Netbeans no tiene idea de lo que estoy hablando! - halfer

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.