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




seleccionar con (25)

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.

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


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.


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.


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

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

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

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.


Una solución de JavaScript para IE es

onselectstart="return false;"

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

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

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.


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.


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/


Solución para WebKit :

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

Lo encontré en un ejemplo de CardFlip.


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.


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

Si estás usando Less y Bootstrap puedes escribir:

.user-select(none);

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


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>


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 .


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.


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


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

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

Use line-height:30px para el intervalo para que el texto se alinee con la imagen:

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>






css cross-browser highlighting textselection