Como deshabilitar la selección de texto con css

Actualizado : 2023-11-09

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;
}

Juneiker Castillo freelance web developer

Soy Juneiker Castillo, un desarrollador web frontend apasionado por la programación y la creación de sitios web modernos rápidos y escalables, en fin un friki 🤓 de javascript enamorado de react js ⚛️.

Sobre mi