user-select

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

La propiedad CSS user-select controla si el usuario puede seleccionar el texto. Esto no tiene ningún efecto en el contenido cargado bajo chrome, excepto en cuadros de texto.

css
/* Valores de palabras clave */
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

/* Varoles globales */
user-select: inherit;
user-select: initial;
user-select: unset;

/* Valores Mozilla-specific */
-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;

/* Valores WebKit-specific */
-webkit-user-select: none;
-webkit-user-select: text;
-webkit-user-select: all; /* No funciona el Safari; solo usa
                             "none" or "text", o si no hará
                             permitir escribir en el contenedor <html> */

/* Valores Microsoft-specific */
-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element;
Valor inicialauto
Applies toall elements
Heredableno
Valor calculadocomo se especifica
Animation typediscrete

Syntaxis

none

El texto y sus sub elementos no son seleccionables. Tenga en cuenta que el objeto Selection puede contener estos elementos.

auto

El valor calculado auto se determina de la siguiente manera: En los pseudo elementos ::before y ::after, el valor calculado es none

  • Si el elemento es un elemento editable, el valor calculado es contain
  • De lo contrario, si el valor calculador de user-select en la matriz de este elemento es all, el valor calculado es all
  • De lo contrario, si el valor calulado de user-select en la matriz de este elemento es none, el valor calculado es none
  • De lo contrario, el valor calculado es text
text

El texto puede ser seleccionado por el usuario.

all

En el editor HTML, si se realiza doble-click o click-contextual en el subelemento, se seleccionará el antecesor más alto de el valor.

contain

Permite que la selección comience dentro del elemento; sin embargo, la selección estará contenida por los límites de ese elemento.

element No estándar (IE-specific alias)

Igual que contain. Solo lo soportado en Internet Explorer.

Formal syntax

user-select = 
auto |
text |
none |
contain |
all

Ejemplos

HTML

html
<p>Debería poder seleccionar este texto.</p>
<p class="unselectable">No puedes seleccionar este texto</p>
<p class="all">Al hacer clic una vez se seleccionará todo este texto.</p>

CSS

css
.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.all {
  -moz-user-select: all;
  -webkit-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

Resultado

Especificaciones

Specification
CSS Basic User Interface Module Level 4
# content-selection

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
user-select
all
auto
none
text

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Véase también