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.
/* 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.
elementNo estándar (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
| Specification |
|---|
| 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.