quitar - evitar seleccionar texto con css

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

Question

Para los anclajes que actúan como botones (por ejemplo, Preguntas , Etiquetas , Usuarios , etc. 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 puede hacer con JavaScript, y un poco de Google dio como resultado la opción de Mozilla solo -moz-user-select .

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

Answer 1

Además, para Internet Explorer, necesita agregar pseudo clase de enfoque (.ClassName: focus) y esquema de estilo: ninguno .

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

Answer 2

Agregue esto a la primera división en la que desea deshabilitar la selección de texto:

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

Answer 3

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.

Answer 4

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.

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

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

Diseño CSS normal

p { color: white;  background: black; }

En la seleccion

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

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

Answer 5

En la mayoría de los navegadores, esto se puede lograr utilizando 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, deberá utilizar el atributo unselectable del elemento que desea que no sea seleccionable. 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 de <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 del 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 evitar esto agregando un controlador de eventos de ratón que no se pueda unselectable El objetivo 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 (IE y Firefox, por ejemplo), 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.

Answer 6

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, 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 totalmente plano, como si estuviera en una aplicación de escritorio.

Answer 7

Esto funciona en algunos navegadores:

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

Simplemente agregue sus elementos / ids deseados delante de los selectores separados por comas sin espacios, como 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 ser visto como un último recurso / catchall.

Answer 8

Esto no es CSS, pero vale la pena mencionar:

jQuery UI Deshabilitar selección :

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

Answer 9

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

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

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

Answer 10

Hasta que la propiedad de user-select de user-select CSS 3 esté disponible, los Gecko basados ​​en Gecko admiten la -moz-user-select que ya encontró. WebKit navegadores basados ​​en WebKit y Blink son compatibles con la -webkit-user-select .

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

No existe una manera rápida y fácil de cumplir con los "estándares" para hacerlo; Usar JavaScript es una opción.

La pregunta real es: ¿por qué desea que los usuarios no puedan resaltar y presumiblemente copiar y pegar ciertos elementos? No he encontrado una sola vez que no quisiera 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, usará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.

Answer 11

He aprendido del sitio web de CSS-Tricks .

user-select: none;

Y esto también:

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

Answer 12

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

Para hacer que todos los elementos dentro de <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 los elementos de entrada sean interactables, por lo tanto, el pseudo-selector :not() . Podrías usar ''*'' cambio si no te importa.

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

Answer 13

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

Answer 14

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

Answer 15

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

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

Answer 16

Puedes usar CSS o JavaScript para eso, la forma de JavaScript también es compatible con los navegadores más antiguos, como Old IEs, pero si no es 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>

Answer 17

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

Answer 18

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

Answer 19

Si estás usando Less y Bootstrap puedes escribir:

.user-select(none);

Answer 20

Solución para WebKit :

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

Lo encontré en un ejemplo de CardFlip.

Answer 21

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

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

Es necesario usar el prefijo para admitirlo en todos los navegadores sin prefijo; esto puede no funcionar en todas las respuestas.

Answer 22

Trate de 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:

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

Answer 23

Una solución de JavaScript para IE es

onselectstart="return false;"

Answer 24

ACTUALIZACIÓN Enero, 2017:

Según Puedo usar , la selección de user-select actualmente es compatible con todos los navegadores excepto 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 */
}

<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 la documentación de Mozilla Developer Network .

Answer 25

Actualización de hackeo rápido: 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 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 dice CSS-Tricks los problemas son

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

Por lo tanto, también puede usar el siguiente en su lugar para imponer que se seleccione un elemento completo, que es la solución al problema. Todo lo que tienes que hacer es cambiar el valor ''ninguno'' a ''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 */   
}

Answer 26

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é con el próximo par de capturas de pantalla (a partir del 7 de noviembre de 2014).

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

Probado en: Ubuntu , Google Chrome 38.0.2125.111.

Answer 27

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

Answer 28

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

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

Aunque no es la mejor manera.

Answer 29

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

Answer 30

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