Imagen destacada del artículo Cómo deshabilitar la selección de texto con css

Cómo deshabilitar la selección de texto con css

css svg
actualizado: 26 / 10 / 2022

De forma predeterminada los navegadores permiten que el usuario seleccione el texto de un documento html usando el mouse o teclado.

Si quieres saber ¿Cómo puede deshabilitar ese comportamiento? para que tú web sea más como una app y menos como un documento.

html básico para este ejercicio

html
<p class="text-selection-disable">
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem
Ipsum.
</p>

Para este ejemplo tenemos un texto de prueba que dentro de una etiqueta p que queremos deshabilitar para que el usuario no pueda sombrearlo o copiarlo de nuestra web.

Deshabilitando la selección de texto con css

Para lograr que el usuario no pueda sombrear el texto debes usar en tu código css la propiedad user-select: none; con su valor declarado en none.

Además debes usar prefijos de los navegadores para asegurarte de que es compatible con todos los dispositivos.

css
.text-selection-disable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Cargando... Esperando para mostrar el código de este ejemplo