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




no seleccionar texto javascript (20)

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


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

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

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

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.


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.


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.



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.


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

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

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

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>


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/


Si estás usando Less y Bootstrap puedes escribir:

.user-select(none);

Solución para WebKit :

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

Lo encontré en un ejemplo de CardFlip.


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

Una solución de JavaScript para IE es

onselectstart="return false;"

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

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.


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


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




textselection