Cómo lograr el resaltado del arco iris cuando un usuario selecciona texto en su sitio web para copiarlo

Utiliza un selector CSS3 llamado selección. Cuando lo usa en un elemento, básicamente le dice al navegador que le otorgue ciertas propiedades visuales cuando se selecciona.

En este ejemplo particular, el elemento bajo consideración es un párrafo (etiqueta

). Si abre el inspector de elementos en su navegador, notará lo siguiente:

1. Cada párrafo del artículo tiene una etiqueta

correspondiente.
2. Todos los elementos del párrafo tienen una :: selección definida en ellos.
3. Cada :: selector de selección tiene una propiedad de background .
4. Cada propiedad de fondo tiene un conjunto de valores de color diferente.

Aquí hay una captura de pantalla del inspector de elementos:


En la captura de pantalla, deshabilité la propiedad de fondo para el :: selector de selección para el párrafo superior (la flecha roja apunta hacia él), para que pueda ver que usa el estilo de selección predeterminado del navegador.

Parece que usan seis colores por los que pasan. Los códigos de colores son:
1. rgba (255, 190, 129, 0.25) -> Naranja
2. rgba (250, 244, 123, 0.25) -> Amarillo
3. rgba (204, 250, 158, 0.25) -> Verde
4. rgba (157, 236, 255, 0.25) -> Azul
5. rgba (212, 169, 255, 0.25) -> Violeta
6. rgba (255, 150, 155, 0.25) -> Rojo