Propiedad user-select de CSS
La propiedad user-select especifica si el usuario puede o no seleccionar texto.
El valor predeterminado es "auto", el cual se determina de la siguiente manera:
- En los pseudo elementos ::before y ::after, el valor calculado es "none"
- Si el elemento es editable, el valor calculado es "contain",
- Si el valor calculado de
user-selecten el padre de este elemento es "all", el valor calculado es "all". - Si el valor calculado de
user-selecten el padre de este elemento es "none", el valor calculado es "none", - De lo contrario, el valor calculado es "text".
INFO
Los prefijos de proveedor (-webkit-, -moz-) ahora están obsoletos en todos los navegadores modernos. La propiedad estándar user-select es totalmente compatible sin ellos.
| Valor inicial | auto |
|---|---|
| Se aplica a | Todos los elementos, aunque algunos valores no tienen efecto en elementos no en línea. |
| Heredable | No. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.userSelect = "text"; |
Sintaxis
Valores de user-select en CSS
user-select: auto | none | text | all | contain | initial | inherit;Ejemplo de la propiedad user-select con el valor "auto":
Ejemplo de código CSS user-select
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: auto;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>En el ejemplo dado, el texto puede seleccionarse si el navegador lo permite.
Ejemplo de la propiedad user-select con el valor "none":
Ejemplo de prefijos CSS user-select
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: none;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>El texto no puede seleccionarse.
Ejemplo de la propiedad user-select con el valor "all":
Ejemplo del valor "all" de CSS user-select
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: all;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>Al hacer clic en cualquier lugar del elemento, se selecciona todo el texto que contiene.
Ejemplo de la propiedad user-select con el valor "text":
Ejemplo del valor "text" de CSS user-select
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: text;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>El texto puede seleccionarse normalmente por el usuario.
Valores
| Valor | Descripción | Probarlo |
|---|---|---|
| auto | El texto puede seleccionarse si el navegador lo permite. Este es el valor predeterminado de esta propiedad. | Probarlo » |
| none | El texto no se selecciona. | Probarlo » |
| text | El texto es seleccionado por el usuario. | Probarlo » |
| all | El texto se selecciona con un solo clic. | Probarlo » |
| contain | El texto puede seleccionarse, pero la selección no puede extenderse más allá de los límites del elemento. Se utiliza típicamente para elementos editables. | Probarlo » |
| initial | Establece la propiedad en su valor predeterminado. | Probarlo » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Cuál de las siguientes afirmaciones es correcta sobre la propiedad CSS user-select?