Imagen ornamentalTradicionalmente, si por algún motivo queremos que los usuarios no sean capaces de seleccionar ciertas partes del contenido de nuestra página Web, hemos tenido que recurrir a JavaScript. Se marcaban los elementos a "proteger" de alguna manera (por ejemplo con una clase determinada) y tras la carga de la página un código los buscaba e interceptaba ciertos eventos para anularlos e impedir así que fueran seleccionables.

La versión 4 de la especificación CSS incluye una nueva funcionalidad precisamente para esto. Todavía está en borrador (el último de enero de este año), pero ya hace tiempo que todos los navegadores del mercado lo soportan (excepto Internet Explorer, claro), incluyendo los móviles.

Se trata de la propiedad user-select. Esta propiedad controla cómo se deben seleccionar los elementos a los que se le aplica, y puede tomar los siguientes valores:

  • text: permite la selección normal de los contenidos de texto del elemento.

La figura muestra cómo se puede seleccionar el texto normalmente

  • none: impide que se pueda seleccionar el texto.

La figura animada muestra cómo, a pesar de pulsar y arrastrar, no queda nada seleccionado

  • all: deja seleccionar el texto, pero todo o nada, es decir, no permite seleccionar palabras o fragmentos sueltos. De hecho, si pulsas encima del elemento ya se selecciona todo automáticamente y si vuelves a pulsar se deselecciona. Muy útil para, por ejemplo, permitir copiar fragmentos de código, contraseñas, URLs y cosas así.

El GIF muestra cómo al pulsar encima o intentar seleccionar, se selecciona todo el texto de golpe.

  • contain: este solo funciona en elementos editables, y hace que la selección no pueda extenderse fuera del elemento, o sea, está contenida en él, de ahí su nombre:

El GIF muestra cómo, aunque arrastremos fuera del área no deja seleccionar nada que esté fuera

De esta manera podemos tener un control muy bueno sobre lo que se selecciona (o no) de nuestro contenido de una forma directa y sencilla, y sin tener que complicarnos la vida con JavaScript.

Por cierto, puedes controlar el aspecto de los elementos seleccionados gracias al pseudoelemento de CSS ::selection. Por ejemplo, puedes hacer que al seleccionarlo, en lugar del color azul por defecto se use otro color escribiendo esto en tu CSS:

#miElemento::selection {
   background-color: red;
}

que haría que tuviera color rojo cualquier selección hecha dentro del elemento llamado miElemento.

Te dejo el ejemplo que he utilizado para que puedas jugar con él, aquí (ZIP, 1.37Kb)

¡Espero que te sea útil!