Propiedad CSS user-select

La propiedad CSS user-select controla si el usuario puede seleccionar texto con el ratón, el teclado o una pulsación larga en dispositivos táctiles. No cambia el aspecto del texto — solo afecta el comportamiento de selección.

Esta página explica qué hace cada valor, cuándo usarías user-select, los errores a tener en cuenta y ejemplos ejecutables que puedes editar.

Por qué usar user-select

Seleccionar texto es un comportamiento predeterminado del navegador, por lo que la mayoría de las veces no se modifica. Se cambia de forma deliberada en algunas situaciones:

Evitar la selección accidental en controles de interfaz — botones, pestañas, elementos de menú, controladores de arrastre. Cuando un usuario hace doble clic o arrastra uno de estos, el navegador resalta la etiqueta, lo que da un aspecto roto. user-select: none lo previene.
Copia con un solo clic para cadenas cortas como códigos de cupones, claves de API o comandos. user-select: all selecciona el elemento completo con un solo clic para que el usuario pueda copiarlo al instante.
Restaurar la selección cuando un padre la ha desactivado, pero un hijo (una dirección, un bloque de código) debe seguir siendo seleccionable — establece user-select: text en el hijo.

El valor predeterminado es "auto", que se determina de la siguiente manera:

En los pseudoelementos ::before y ::after, el valor calculado es "none"
Si el elemento es un elemento editable, el valor calculado es "contain",
Si el valor calculado de user-select en el padre de este elemento es "all", el valor calculado es "all".
Si el valor calculado de user-select en el padre de este elemento es "none", el valor calculado es "none",
De lo contrario, el valor calculado es "text".

Información

Los prefijos de proveedor (-webkit-, -moz-) están obsoletos en todos los navegadores modernos. La propiedad estándar user-select es totalmente compatible sin ellos.

Valor inicial	auto
Se aplica a	Todos los elementos, aunque algunos valores no tienen efecto en elementos no en línea.
Heredada	No.
Animable	No.
Versión	CSS3
Sintaxis DOM	object.style.userSelect = "text";

Sintaxis

Valores de CSS user-select

user-select: auto | none | text | all | contain | initial | inherit;

Ejemplo de la propiedad user-select con el valor "auto":

Ejemplo de código CSS user-select

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        user-select: auto;
      }
    </style>
  </head>
  <body>
    <h2>User-select property example</h2>
    <div>Lorem ipsum is simply dummy text.</div>
  </body>
</html>

Pruébalo tú mismo »

En el ejemplo dado, el texto puede seleccionarse si el navegador lo permite.

Ejemplo de la propiedad user-select con el valor "none":

Ejemplo CSS user-select con prefijos

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        user-select: none;
      }
    </style>
  </head>
  <body>
    <h2>User-select property example</h2>
    <div>Lorem ipsum is simply dummy text.</div>
  </body>
</html>

Pruébalo tú mismo »

El texto no puede seleccionarse.

Ejemplo de la propiedad user-select con el valor "all":

Ejemplo del valor all de CSS user-select

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        user-select: all;
      }
    </style>
  </head>
  <body>
    <h2>User-select property example</h2>
    <div>Lorem ipsum is simply dummy text.</div>
  </body>
</html>

Pruébalo tú mismo »

Al hacer clic en cualquier parte del elemento se selecciona todo el texto dentro de él — ideal para copiar códigos o comandos con un solo clic.

Ejemplo de la propiedad user-select con el valor "text":

Ejemplo del valor text de CSS user-select

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        user-select: text;
      }
    </style>
  </head>
  <body>
    <h2>User-select property example</h2>
    <div>Lorem ipsum is simply dummy text.</div>
  </body>
</html>

Pruébalo tú mismo »

El texto puede ser seleccionado normalmente por el usuario. Este valor es útil para reactivar la selección en un hijo concreto cuando un ancestro ha establecido user-select: none.

Cosas a tener en cuenta

user-select: none no es una característica de seguridad. Solo bloquea la selección casual con ratón o teclado — el texto sigue en el DOM y es completamente accesible mediante "Ver código fuente", lectores de pantalla y la copia por teclado en muchos navegadores. Nunca lo uses para "proteger" contenido.
No deshabilita la copia mediante programación ni mediante clic derecho → Copiar en todos los navegadores. Si realmente necesitas bloquear la copia, debes manejar el evento copy en JavaScript — pero piénsatelo bien antes de hacerlo.
¿Heredada? No. user-select no se hereda en el sentido habitual, pero su valor calculado depende del padre (consulta las reglas de "auto" anteriores), por lo que establecer none en un contenedor afecta efectivamente a sus descendientes.
Combínala con pointer-events de forma reflexiva. Resuelven problemas distintos: user-select controla el resaltado de texto, mientras que pointer-events controla si un elemento responde al ratón o al tacto en absoluto.

Valores

Valor	Descripción	Pruébalo
auto	El texto puede seleccionarse si el navegador lo permite. Este es el valor predeterminado de esta propiedad.	Pruébalo »
none	El texto no se selecciona.	Pruébalo »
text	El texto es seleccionado por el usuario.	Pruébalo »
all	El texto se selecciona con un solo clic.	Pruébalo »
contain	El texto puede seleccionarse, pero la selección no puede extenderse más allá de los límites del elemento. Se usa normalmente en elementos editables.	Pruébalo »
initial	Establece la propiedad en su valor predeterminado.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Cuál afirmación es correcta sobre la propiedad CSS user-select?

Si el elemento es un elemento editable, el valor calculado es 'cover'.Si el valor calculado de user-select en el padre de este elemento es 'none', el valor calculado es 'auto'.En los pseudoelementos ::before y ::after, el valor calculado es 'text'.Si el valor calculado de user-select en el padre de este elemento es 'all', el valor calculado es 'all'.

Propiedades relacionadas

pointer-events — controla si un elemento reacciona a eventos de ratón y táctiles.
cursor — cambia el puntero del ratón que se muestra sobre un elemento.
::before y ::after — los pseudoelementos cuyo valor calculado de user-select es siempre none.