Esta página ha sido traducida del inglés por la comunidad. Aprende más y únete a la comunidad de MDN Web Docs.
user-select
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Want more support for this feature? Tell us why.
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
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # content-selection |
Compatibilidad con navegadores
Enable JavaScript to view this browser compatibility table.
Véase también
::selection- The JavaScript
Selectionobject. - user-select in CSS Basic User Interface Module Level 4.