CSS | Propiedad de selección de usuario

Esta propiedad se utiliza para especificar si el texto puede ser seleccionado por el usuario o no.
Nota: El doble clic en algún texto se seleccionará/resaltará, pero esta propiedad se puede usar para evitarlo.
 

Sintaxis: 

user-select: auto|none|text|all;

Valor predeterminado: automático

El valor de la propiedad: 
 

auto: Tiene el valor predeterminado, es decir, el usuario puede seleccionar el texto.
Sintaxis: 
 

user-select: auto;

Ejemplo: 
 

html

<!DOCTYPE html>
<html>
    <head>
        <title>user-select property</title>
        <style>
            div {
                -webkit-user-select: auto;
                -moz-user-select: auto;
                -ms-user-select: auto;
                user-select: auto;
            }
            h1, h3 {
                color:green;
            }
            body {
                text-align:center;
            }
        </style>
    </head>
    <body>
        <h1>GeeksforGeeks</h1>
        <h3>user-select:auto;</h3>
        <div>
         GeeksforGeeks:
         A computer science portal for geeks
        </div>
    </body>
</html>                   

Producción: 
 

ninguno: se utiliza para evitar que el usuario seleccione texto, lo que significa que el usuario no puede seleccionar el texto por sí mismo.
Sintaxis: 
 

user-select: none;

Ejemplo: 
 

html

<!DOCTYPE html>
<html>
    <head>
        <title>user-select property</title>
        <style>
            div {
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            h1, h3 {
                color:green;
            }
            body {
                text-align:center;
            }
        </style>
    </head>
    <body>
        <h1>GeeksforGeeks</h1>
        <h3>user-select:none;</h3>
        <div>
         GeeksforGeeks:
         A computer science portal for geeks
        </div>
    </body>
</html>

Producción: 
 

texto: esta propiedad permite al usuario seleccionar el texto. No proporciona evitar la selección de texto por parte del usuario.
Sintaxis: 
 

user-select: text;

Ejemplo: 
 

html

<!DOCTYPE html>
<html>
    <head>
        <title>user-select property</title>
        <style>
            div {
                -webkit-user-select: text;
                -moz-user-select: text;
                -ms-user-select: text;
                user-select: text;
            }
            h1, h3 {
                color:green;
            }
            body {
                text-align:center;
            }
        </style>
    </head>
    <body>
        <h1>GeeksforGeeks</h1>
        <h3>user-select:text;</h3>
        <div>
         GeeksforGeeks:
         A computer science portal for geeks
        </div>
    </body>
</html>

Producción: 
 

all: Se utiliza para seleccionar el texto con un solo clic del mouse en lugar de un doble clic.
Sintaxis: 
 

user-select: all;

Ejemplo: 
 

html

<!DOCTYPE html>
<html>
    <head>
        <title>user-select property</title>
        <style>
            div {
                -webkit-user-select: all;
                -moz-user-select: all;
                -ms-user-select: all;
                user-select: all;
            }
            h1, h3 {
                color:green;
            }
            body {
                text-align:center;
            }
        </style>
    </head>
    <body>
        <h1>GeeksforGeeks</h1>
        <h3>user-select:text;</h3>
        <div>
         GeeksforGeeks:
         A computer science portal for geeks
       </div>
    </body>
</html>

Producción: 
 

Navegadores compatibles: los navegadores compatibles con la propiedad seleccionada por el usuario se enumeran a continuación: 
 

  • Google cromo 54
  • Borde 79
  • explorador de Internet 10
  • firefox 69
  • Ópera 41
  • Safari 16

Publicación traducida automáticamente

Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *