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
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 esnone
- 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 esall
, el valor calculado esall
- De lo contrario, si el valor calulado de
user-select
en 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
Non-standard (IE-specific alias)-
Igual que
contain
. Solo lo soportado en Internet Explorer.
Nota: CSS UI 4 renombra user-select: a contain.
Formal syntax
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
BCD tables only load in the browser
Véase también
::selection
- The JavaScript
Selection
object. - user-select in CSS Basic User Interface Module Level 4.