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.

avatar