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 insertar estilos css en html

Imagen destacada del artículo Cómo insertar estilos css en html

Cómo poner color de fondo en html con css

Imagen destacada del artículo Cómo poner color de fondo en html con css

Cómo cambiar color de texto html con css

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

Cómo crear un formulario de contacto con html

Imagen destacada del artículo Cómo crear un formulario de contacto con html

Cómo centrar un div con css

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

Cómo centrar una tabla html con css

Imagen destacada del artículo Cómo centrar una tabla html con css

Colores en html, códigos y nombres

Imagen destacada del artículo Colores en html, códigos y nombres

Cómo hacer cuadros de colores en html

Imagen destacada del artículo Cómo hacer cuadros de colores en html