Seguramente en alguna ocasión vas a necesitar que los visitantes de tu sitio web no puedan seleccionar algún texto de forma habitual, ya sea para copiar el texto o para realizar cualquier acción. Esto lo podemos resolver fácilmente con una función de JavaScript. Pero esta vez te voy a mostrar como hacerlo por medio de código CSS.
Utilizaremos la propiedad user-select
apoyada con cada prefijo de los diferentes navegadores.
.no-selecionable {
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer */
-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
-webkit-user-select: none; /* Chrome, Safari, and Opera */
-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}
Veamos un ejemplo:
See the Pen Inhabilitar Selección de textos con CSS by frontend (@tutosytips) on CodePen
20550
Con la propiedad cursor
y la propiedad not-allowed
le podemos insinuar al usuario que el contenido no se permite acciones de usuario, esto solo para apoyar la visual de la acción.