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
Artículos relacionados:
Cómo utilizar negrita en CSS: Aprende a resaltar tu contenido

Imagen destacada del artículo Cómo utilizar negrita en CSS: Aprende a resaltar tu contenido

Cómo hacer una tienda online con HTML y CSS: Una guía paso a paso

Imagen destacada del artículo Cómo hacer una tienda online con HTML y CSS: Una guía paso a paso

Colores en html: cómo utilizar los formatos RGB, hexadecimal y HSL

Imagen destacada del artículo Colores en html: cómo utilizar los formatos RGB, hexadecimal y HSL

Cómo cambiar color de texto html con css

Imagen destacada del artículo Cómo cambiar color de texto html con css

Cursor en css: personalizar el puntero del mouse

Imagen destacada del artículo Cursor en css: personalizar el puntero del mouse

Input css: personalizar estilos de campos de entrada en css

Imagen destacada del artículo Input css: personalizar estilos de campos de entrada en css

Cómo centrar un botón con css

Imagen destacada del artículo Cómo centrar un botón con css