CSS Prevenir la selección de texto

1. Use el atributo user-select de CSS para evitar la selección de texto
2. Agregar selección de usuario: ninguno a un texto
3. Agregue el atributo selección de usuario al texto en una tabla
4. Conclusión

En CSS, hay muchos atributos que podemos usar para dar algunas modificaciones a un elemento. Aquí, la palabra modificación se refiere al estilo de un elemento o dar o quitar varios controles de un elemento.

Use el atributo user-select de CSS para evitar la selección de texto

Cuando diseñamos páginas web, generalmente agregamos texto, que pueden ser párrafos, datos en una tabla, etiquetas en un formulario, etc. Cuando ese texto aparece en las páginas web, las personas que las ven pueden seleccionar el texto y copiarlo para diversas actividades. .

Por ejemplo, un chico que visita una página web puede seleccionar algún texto de esta página y copiarlo para su uso; sin embargo, algunos propietarios de páginas web no prefieren eso. Entonces, para evitar eso, podemos bloquear la selección de texto.

CSS nos proporciona un atributo para evitar la selección de texto que es el atributo selección de usuario. Usando este atributo, podemos evitar que los usuarios seleccionen cualquier texto.

Pero todos usamos diferentes tipos de navegadores web. Deberíamos cambiar la forma en que usamos este atributo si usamos diferentes tipos de navegadores web.

A continuación, mostramos cómo usar el atributo selección de usuario en varios navegadores web.

Sintaxis:

-webkit-user-select: none;    /*Standard method. Can be used in Safari*/
-moz-user-select: none;       /*Standard method. Can be used in Firefox*/
-ms-user-select: none;        /*Standard method. Can be used in Internet Explorer or Edge*/
user-select: none;            /*Standard method. Can be used in Google Chrome*/

El primer método es para usuarios de iOS y Mac, ya que su navegador predeterminado es Safari. Los usuarios de Firefox pueden usar el segundo método y los usuarios que usan Internet Explorer o Edge pueden usar el tercer método.

Aquellos que usan Google Chrome como su navegador pueden usar el cuarto método.

En las sintaxis anteriores, hay varias opciones que podemos asignar al valor del atributo selección de usuario.

En este artículo, discutiremos la opción ninguno del atributo selección de usuario para evitar que los usuarios seleccionen el texto.

Agregar selección de usuario: ninguno a un texto

Para comprender este concepto fácilmente, agreguemos un texto simple en una página web de la siguiente manera.

<div>
    <p class="unselect">This is a text</p>
</div>

Agregar estilos al texto

Agreguemos algunos estilos CSS a este texto para una mejor vista.

.unselect{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30px;
    color: navy;
    padding-left: 10px;
}

Aquí, le hemos dado al texto una fuente, tamaño de fuente y relleno. Debería verse así, y podemos seleccionar el texto.

Como puede ver, podemos seleccionar nuestro texto como de costumbre.

Agregue el atributo selección de usuario con el valor ninguno

Después de agregar estilos, podemos configurar el atributo selección de usuario para evitar la selección de texto. Usamos ninguno como el valor del atributo, como se muestra a continuación.

.unselect{
    user-select: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30px;
    color: navy;
    padding-left: 10px;
}

<div>
    <p class="unselect">This is a text</p>
</div>

Como puede ver, nuestro texto ahora no se puede seleccionar.

Pero el código anterior solo funciona cuando se usa el navegador web Google Chrome. Podemos modificar el código anterior para usarlo en otros navegadores web.

.unselect{
    user-select: none; /*Standard method. Can use in Google Chrome*/
    -webkit-user-select: none; /*Standard method. Can use in Safari*/
    -moz-user-select: none; /*Standard method. Can use in Firefox*/
    -ms-user-select: none; /*Standard method. Can use in Internet Explorer or Edge*/

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30px;
    color: navy;
    padding-left: 10px;
}

<div>
    <p class="unselect">This is a text</p>
</div>

Agregue el atributo selección de usuario al texto en una tabla

Ahora, creemos una tabla para probar este atributo. La tabla que construiremos tiene dos columnas: Nombre y Apellido, y dos filas que incluyen datos relevantes.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="Styles.css">
        <title>HTML prevent text selection</title>
    </head>
    <body>
        <table>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
            <tr>
                <td>Jamie</td>
                <td>Anderson</td>
            </tr>
        </table>
    </body>
</html>

Como puedes ver, hemos creado la tabla, pero no tiene estilos. Apliquemos estilo a nuestra tabla usando CSS.

table {
    background-color: rgb(243, 150, 253);
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: auto;
}

td, th {
    border: 1px solid #000000;
    text-align: left;
    padding: 8px;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="Styles.css">
        <title>HTML prevent text selection</title>
    </head>
    <body>
        <table>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
            <tr>
                <td>Jamie</td>
                <td>Anderson</td>
            </tr>
        </table>
    </body>
</html>

Como se muestra en el resultado, hemos diseñado nuestra tabla. También puede ver que podemos seleccionar el texto dentro de la tabla, así que intentemos deshabilitarlo.

Como en el ejemplo anterior, podemos agregar el atributo user-select a la tabla. Puede agregarlo a toda la tabla o solo para celdas seleccionadas.

Agregaremos el atributo selección de usuario solo para los encabezados de la tabla. Podemos agregar el siguiente fragmento de código al mismo código CSS.

th{
    user-select: none; /*Standard method. Can use in Google Chrome*/
    -webkit-user-select: none; /*Standard method. Can use in Safari*/
    -moz-user-select: none; /*Standard method. Can use in Firefox*/
    -ms-user-select: none; /*Standard method. Can use in Internet Explorer or Edge*/
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="Styles.css">
        <title>HTML prevent text selection</title>
    </head>
    <body>
        <table>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
            <tr>
                <td>Jamie</td>
                <td>Anderson</td>
            </tr>
        </table>
    </body>
</html>

Si ejecutamos el código, obtendremos un resultado como el siguiente.

Como puede ver, solo el texto en los encabezados no se puede seleccionar.

Conclusión

Este artículo ha discutido la prevención de la selección de texto y cómo el atributo selección de usuario de CSS ayuda a lograrlo. Como aprendimos, hay diferentes formas de usar este atributo en varios navegadores web.

Tomamos dos ejemplos para aclarar las cosas básicas de la prevención de la selección de texto. Hay otros métodos, pero CSS proporciona una forma sencilla de lograr esto.