user-select
Disponibilidad limitada
Esta característica no es Baseline porque no funciona en algunos de los navegadores más usados.
¿Quieres que más navegadores sean compatibles con esta característica? Cuéntanos por qué.
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.
/* 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 inicial | auto |
|---|---|
| Applies to | all elements |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | discrete |
Syntaxis
none-
El texto y sus sub elementos no son seleccionables. Tenga en cuenta que el objeto
Selectionpuede contener estos elementos. auto-
El valor calculado auto se determina de la siguiente manera: En los pseudo elementos
::beforey::after, el valor calculado esnone- Si el elemento es un elemento editable, el valor calculado es
contain - De lo contrario, si el valor calculador de
user-selecten la matriz de este elemento esall, el valor calculado esall - De lo contrario, si el valor calulado de
user-selecten la matriz de este elemento esnone, el valor calculado esnone - De lo contrario, el valor calculado es
text
- Si el elemento es un elemento editable, el valor calculado es
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(IE-specific alias)-
Igual que
contain. Solo lo soportado en Internet Explorer.
Nota: CSS UI 4 renombra user-select: a contain.
Formal syntax
user-select =
auto |
text |
none |
contain |
all
Ejemplos
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
.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
| Especificación |
|---|
| CSS Basic User Interface Module Level 4 # content-selection |
Compatibilidad con navegadores
Véase también
::selection- The JavaScript
Selectionobject. - user-select in CSS Basic User Interface Module Level 4.