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

5618

Para los anclajes que actúan como botones (por ejemplo , Preguntas , Etiquetas , Usuarios , etc.que se encuentran en la parte superior de la página de Desbordamiento de pila) 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 produjo la -moz-user-selectopción solo para Mozilla .

¿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"?

7
  • 8
    ¿Pueden los elementos dentro del elemento que tienen el resaltado deshabilitado, tener el resaltado habilitado en CSS en el atributo de estilo o clase? o en otras palabras, ¿existen otros valores para -webkit-user-select ect? aparte de ninguno? user659576 14/03/11 a las 21:18
  • 8
    Relacionado: stackoverflow.com/questions/16600479/… = cómo permitir que solo se seleccionen algunos de los elementos secundariosJK. 17 de mayo de 2013 a las 2:36
  • 10
    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; }DaAwesomeP 12/12/14 a las 1:03
  • 15
    ¿Puedo simplemente decir: por favor no hagas esto? Según mi experiencia, la mayoría de las veces quiero 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, por favor, no hagas esto a menos que tengas una muy, muy buena razón. kajacx 30/08/2016 a las 20:10
  • 3
    En el año 2017, es mejor manera de utilizar postcssy autoprefixery juego de la versión del navegador, a continuación, postcsshacer que todo fresco. AmerllicA 6 dic 2017 a las 11:47
7956
+50

ACTUALIZACIÓN Enero de 2017:

Según Can I use , user-selectactualmente es compatible con todos los navegadores excepto Internet Explorer 9 y sus versiones anteriores (pero, lamentablemente, todavía se 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 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. Además, los navegadores pueden dejar de admitirlo en el futuro.


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

Los valores de este atributo son none, text, toggle, element, elements, ally inherit.

4
  • 39
    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 14/01/11 a las 13:07
  • 62
    'user-select'- Valores: ninguno | texto | alternar | elemento | elementos | todo | heredar - w3.org/TR/2000/WD-css3-userint-20000216Blowsie 21/03/11 a las 9:44
  • 334
    ¡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 4 de septiembre de 12 a las 16:19
  • 1
    Según caniuse, parece que ya no necesita esos prefijos. aderchox 16 de julio a las 11:16
905
+50

En la mayoría de los navegadores, esto se puede lograr usando 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á utilizar 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 de <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 del 30 de abril de 2014 : este recorrido de á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 evitar esto agregando un mousedowncontrolador de eventos que se establece unselectableen el destino del evento. Consulte http://jsbin.com/yagekiji/1 para obtener 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.

4
  • 32
    debe eliminar el selector * de su ejemplo, es realmente ineficiente y realmente no hay necesidad de usarlo en su ejemplo, ¿verdad? Blowsie 14 de enero de 2011 a las 13:15
  • 70
    @Blowsie: No lo creo: la especificación CSS 2 establece que *.fooy .fooson exactamente equivalentes (en el segundo caso, el selector universal ( *) está implícito), por lo que, salvo las peculiaridades del navegador, no puedo ver que incluir el *daño 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 14/01/11 a las 13:24
  • 40
    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 14/01/11 a las 13:49
  • 21
    En lugar de usar class = "unselectable", simplemente use el selector de atributos [unselectable = "on"] {…}Chris Calo 26/01/12 a las 19:39
214

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 basados ​​en WebKit y Blink son compatibles con la -webkit-user-selectpropiedad.

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.

3
  • 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 4 de nov. De 2009 a las 12:05
  • 31
    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 6 de enero de 2010 a las 16:08
  • 33
    Aplicación web altamente interactiva con mucho arrastrar y soltar ... el resaltado accidental es un gran problema de usabilidad. Marc Hughes 3 jun 14 a las 21:08
205

Una solución de JavaScript para Internet Explorer es:

onselectstart="return false;"
1
  • 59
    ¡No te olvides ondragstart! Mathias Bynens 26 de mayo de 2010 a las 13:25
148

Si desea deshabilitar la selección de texto en todo excepto en <p>elementos, puede hacerlo en CSS (tenga cuidado con lo -moz-noneque permite anular en subelementos, lo cual 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;
}
6
  • 13
    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 07/07/11 a las 22:39
  • 12
    Tenga mucho cuidado con la desactivación de las expectativas de la interfaz de usuario del navegador en TODO el código, excepto en un elemento. ¿Qué pasa con el texto <li /> de los elementos de la lista, por ejemplo? Jason T Featheringham 12/11/11 a las 7:13
  • Solo una actualización ... según MDN desde Firefox 21 -moz-noney noneson iguales. Kevin Fegan 25 dic '13 a las 15:56
  • 2
    Para esto, puede agregar cursor: predeterminado y cursor: texto respectivamente:)T4NK3R 14/07/2014 a las 17:14
  • LA 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). Hypersoft Systems 12/09/19 a las 6:54
133

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.

3
  • ¿"Plano" en contraposición a qué? kojow7 9 feb 2018 a las 20:55
  • @ 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 19 de septiembre de 2018 a las 9:35
  • 4
    Me sorprendió descubrir que Firefox todavía requiere el prefijo de proveedor en 2019. Lo usé sin tener en cuenta solo user-select: none;, pensando que el estándar ya serí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 ... realmente creo que debería ser user-select: cant;porque es más descriptivo, ¿sabes?" "Ya hemos hablado de esto, Mike. Tendríamos que omitir el apóstrofe, ¡y eso es de mala educación!" "¡Suficiente, todos! Vamos a deliberar sobre este asunto nuevamente el próximo mes. ¡Se levantó la reunión del Comité de Normas!" Mentalist 24 de mayo de 2019 a las 3:19
116

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

::selection { background: transparent; }
::-moz-selection { background: transparent; }
2
  • 128
    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 2 feb 2011 a las 15:01
  • 2
    No funciona en imágenes PNG con áreas transparentes: siempre seleccionará en azul claro ... ¿Alguna solución? AvL 18 de septiembre de 2013 a las 21:12
83

Solución alternativa para WebKit :

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

Lo encontré en un ejemplo de CardFlip.

1
  • 1
    El uso transparenten lugar de rgba también funciona en Chrome 42 en Android. Clint Pachl 29/04/15 a las 20:46
82

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

Para hacer que todos los elementos dentro <div class="draggable"></div>no se puedan seleccionar, 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ía usar '*'en su 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í.

7
  • 6
    Utilice -ms-user-select: none; (para IE10) y su jQuery "if" debería ser esto: if (($ .browser.msie && $ .browser.version <10) || $ .browser.opera)mhenry1384 31 de enero de 2013 a las 3:42
  • ¡¡¡Cuidado hombre !!! Para que sea seleccionable en Firefox debes usar-moz-user-select: Normal;Nicolas Thery 10/0313 a las 16:53
  • 8
    @ mhenry1384 jQuery.browserha quedado obsoleto a partir de la versión 1.3 y se ha eliminado en la versión 1.9 - api.jquery.com/jQuery.browserWynandB 14 de marzo de 2013 a las 23:58
  • @Wynand Buen punto. Pero, ¿qué tipo de "detección de características" existe para determinar qué propiedad CSS usar? Tom Auger 15 de marzo de 2013 a las 13:28
  • @TomAuger Puede usar jQuery.support, le permite verificar características únicas: EnlaceAequanox 28 de marzo de 2013 a las 10:10
76

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

4
  • 3
    También puede utilizarlo titlecomo atributo. Toothbrush 7 de mayo de 2014 a las 16:50
  • 7
    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. pseudosavant 16 de septiembre de 2014 a las 21:49
  • 4
    Lo probé ( JSBin ) y no funciona en IE. Desafortunadamente, los IE más antiguos son los únicos que user-selectno funcionan. pseudosavant 16 de septiembre de 2014 a las 21:58
  • 1
    ¡Esta es una excelente alternativa sin JS que funciona en Chrome! ¡Impresionante! saricden 6/11/18 a las 15:05
75

Puede usar CSS o JavaScript para eso.

La forma de JavaScript es compatible con navegadores más antiguos , como las versiones antiguas de Internet Explorer, pero si no es su caso, use la forma de 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>
0
63

Además, para Internet Explorer, debe agregar unafocus pseudoclase (.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  */
}
1
  • 3
    Esto funciona en IE siempre que la selección comience en un elemento con la classNameclase. Vea este JSBin . pseudosavant 16 de septiembre de 2014 a las 22:01
60

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

Una actualización rápida de Hack

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 ello, 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  */
}
0
52

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ébelo en este CodePen .

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

Compatibilidad del navegador aquí .

51

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

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

.user-select(none);
49
-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');
49

Laboral

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.

2
  • 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 21/03/2017 a las 22:52
  • 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 21/03/2017 a las 22:52
40

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.

7
  • 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 5 de mayo de 2009 a las 20:40
  • ¿Pero eso no expone detalles de implementación innecesarios? No se puede seleccionar una entrada o el texto de un botón. anon 5 de mayo de 2009 a las 20:40
  • @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 hacerlo, tendrán que comenzar a seleccionar fuera del botón; si hacen clic dentro del 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 5 de mayo de 2009 a las 20:49
  • 8
    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 3 de agosto de 2013 a las 16:52
  • 2
    ¿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 25/07/2014 a las 11:32
37

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

1
  • 4
    Hay pocas cosas que se pueden saber con certeza, pero esta solución definitivamente no funciona en todos los navegadores. Volker E. 30 de septiembre de 2014 a las 9:27
37

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

Prefix need to be used to support it in all browsers. Without a prefix this may not work in all the answers.

33

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. Se trabajará en Internet Explorer 9 o posterior.

2
32

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

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

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.

1
  • 1
    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 5 de marzo de 2016 a las 1:34
27

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

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á que eliminar el innerHTML de eso h1, en este caso Hello, World . 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.

23

Esto no es CSS, pero vale la pena mencionarlo:

jQuery UI Desactivar selección :

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

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/

0
21

Aunque este pseudo-elemento estaba en borradores de Selectores de 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 trata 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.

1
  • ¡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 26/04/2014 a las 20:16