Cómo deshabilitar con CSS los estilos aplicados cuando se selecciona texto en una página

Cuando el usuario selecciona texto en cualquier página HTML, el navegador aplica ciertos estilos para resaltar el texto seleccionado. En mi caso, quiero evitar que se apliquen esos estilos a unos determinados elementos que el usuario puede seleccionar por error.

Con JavaScript se podría impedir que el usuario seleccionara esos elementos, pero estoy buscando una solución basada exclusivamente en CSS. ¿Cuáles son los estilos, a ser posible que sean parte del estándar CSS, que habría que aplicar para conseguirlo?

Estás leyendo una traducción autorizada de la pregunta CSS rule to disable text selection highlighting planteada por Josh Crozier en StackOverflow.

Respuestas

Para impedir la selección de texto en todos y cada uno de los navegadores disponibles, tienes que utilizar las siguientes reglas:

.noseleccionado {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

<p>
    Este texto se puede seleccionar sin problemas.
</p>
<p class="noseleccionado">
    Este texto no se puede seleccionar
</p>

Si tienes la desgracia de trabajar con versiones antiguas del navegador Internet Explorer, tendrás que añadir más reglas y aplicarlas también en el pseudo-estado :focus, tal y como se muestra en este ejemplo:

.noseleccionado,
.noseleccionado: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; /* necesario para Internet Explorer */
}

@javiereguiluz

7 febrero 2015, 19:06