Selección de usuario - Trucos CSS

La user-selectpropiedad en CSS controla cómo se permite seleccionar el texto de un elemento. Por ejemplo, se puede utilizar para hacer que el texto no se pueda seleccionar.

.row-of-icons ( -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Likely future */ )

Esto es útil en situaciones en las que desea proporcionar una experiencia de copiar y pegar más fácil / limpia para los usuarios (no hacer que accidentalmente seleccionen texto inútiles, como íconos o imágenes). Sin embargo, tiene un poco de errores. Firefox hace cumplir el hecho de que cualquier texto que coincida con ese selector no se puede copiar. WebKit todavía permite copiar el texto si selecciona elementos a su alrededor.

También puede usar esto para hacer cumplir la selección de un elemento completo:

.force-select ( -webkit-user-select: all; /* Chrome 49+ */ -moz-user-select: all; /* Firefox 43+ */ -ms-user-select: all; /* No support yet */ user-select: all; /* Likely future */ )

Aquí hay algunas demostraciones de esos:

Vea la demostración de selección de usuario de Pen por Chris Coyier (@chriscoyier) en CodePen.

No hubo especificaciones para esta propiedad durante bastante tiempo, pero ahora se cubre en el módulo de interfaz de usuario básico CSS nivel 4.

El valor predeterminado es auto, que hace que la selección suceda normalmente como se espera. “Normalmente” es un poco complicado. Vale la pena citar la especificación aquí:

En los pseudoelementos :: before y :: after, el valor calculado es none

Si el elemento es un elemento editable , el valor calculado escontain

De lo contrario, si el valor calculado de la selección del usuario en el padre de este elemento es all, el valor calculado esall

De lo contrario, si el valor calculado de la selección del usuario en el padre de este elemento es none, el valor calculado esnone

De lo contrario, el valor calculado es text

En otras palabras, cae en cascada inteligentemente y se restablece a un estado sensorial. Parece que tal vez esta característica podría usarse para hacer que los pseudo elementos se puedan seleccionar, pero aún no hay una palabra final.

Mayor / Propietario

Firefox admite -moz-none, que es como ninguno, excepto que significa que los subelementos pueden anular la cascada y volver a ser seleccionables con -moz-user-select: text;A partir de Firefox 21, ninguno se comporta como -moz-none.

Internet Explorer también admite un valor propietario hasta ahora element, en el que puede seleccionar texto dentro del elemento, pero la selección se detendrá en los límites de ese elemento.

Más información

Documentos de MDN
Interoperabilidad de selección de usuario

Soporte del navegador

Esto es específicamente para -*-user-select: none;

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.