Pregunta ¿Cómo deshabilitar resaltar la selección de texto?


Para anclas que actúan como botones (por ejemplo, Preguntas, Etiquetas, Usuarios, etc. en la parte superior de la página 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 podría hacerse con JavaScript, y un poco de Google produjo solo el Mozilla -moz-user-select opción.

¿Hay alguna manera de cumplir con este estándar con CSS, y si no, cuál es el enfoque de "mejores prácticas"?


4350
2018-05-05 20:29


origen


Respuestas:


ACTUALIZACIÓN enero de 2017:

De acuerdo a Puedo usar, el 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 un característica no estándar (es decir, no forma parte de ninguna especificación). No se garantiza que funcione en todas partes, y puede haber diferencias en la implementación entre navegadores y en el futuro los navegadores pueden dejar de brindar soporte.


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


6360
2017-12-05 11:45



En la mayoría de los navegadores, esto se puede lograr usando variaciones propietarias en CSS user-select propiedad, originalmente propuesto y luego abandonado en CSS3 y ahora propuesto 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, necesitarás usar el unselectable atributo del elemento que desea ser no seleccionable. 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 poner un atributo en la etiqueta de inicio de cada elemento dentro del <div>. Si esto es un problema, 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 30 de abril de 2014: Este cruce de árbol necesita volver a ejecutarse cada vez que se agrega un nuevo elemento al árbol, pero parece de un comentario de @Han que es posible evitar esto mediante agregando un mousedown controlador de eventos que establece unselectable en el objetivo del evento. Ver http://jsbin.com/yagekiji/1 para detalles.


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) sigue siendo imposible evitar las selecciones que comienzan antes y después del elemento no seleccionable sin hacer que todo el documento no sea seleccionable.


727
2017-11-13 16:05



Una solución de JavaScript para IE es

onselectstart="return false;"

165
2018-05-05 20:37



Hasta CSS 3 usuario-seleccionar la propiedad está disponible, Gecolos navegadores basados ​​en -moz-user-select propiedad que ya encontraste WebKit y los navegadores basados ​​en Blink soportan el -webkit-user-select propiedad.

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

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

La verdadera pregunta es, ¿por qué quieres que los usuarios no puedan destacar y, presumiblemente, copiar y pegar ciertos elementos? No me he encontrado ni una sola vez que quisiera que los usuarios resalten una determinada parte de mi sitio web. Varios de mis amigos, después de pasar muchas horas leyendo y escribiendo código, usarán la función resaltada 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 ver que esto es útil es si tiene botones para formularios que no deberían copiarse y pegarse si un usuario copia y pega el sitio web.


159
2018-05-24 21:24



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

120
2017-08-30 18:32



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, 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 el texto sea totalmente plano, como lo sería en una aplicación de escritorio.


111
2018-05-05 20:46



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

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

101
2017-09-21 07:09