Soy bastante activo en CodePen. Hace unos meses, publiqué un bolígrafo que demuestra cómo cambiar el color de resaltado del texto en la página. Pensé que sería bueno escribir un artículo corto que lo guiará a través de los conceptos básicos y luego profundizar un poco más con las variables CSS.
Los basicos
Es bastante simple. Para cambiar el color del texto resaltado, simplemente apunte al ::selection selector y luego defina el color del background propiedad.
Mira el fragmento a continuación.
::selection {
background: red;
}
Entrar en el modo de pantalla completa Salir del modo de pantalla completa
Bucear más profundo
Ahora que sabemos lo fácil que es cambiar el color de resaltado, vayamos un paso más allá y rotamos los colores utilizando un poco de JavaScript y una única variable CSS.
Primero, en su JavaScript, defina una matriz de cadenas: cada elemento de la matriz es un valor de color hexadecimal.
Aquí está mi matriz:
const colors = ["#c1b001", "#a8140e", "#4315aa", "#359d09", "#8f4762"];
Entrar en el modo de pantalla completa Salir del modo de pantalla completa
Queremos asignar aleatoriamente un color de la matriz a nuestra variable CSS cuando el usuario tiene el botón del mouse presionado para seleccionar algún texto.
Para hacer esto, necesitamos crear un nuevo detector de eventos y escuchar el mousedown evento.
Aquí está mi oyente de eventos:
window.addEventListener("mousedown", () => {
// code will go here
});
Entrar en el modo de pantalla completa Salir del modo de pantalla completa
Ahora que tenemos este evento configurado, hay tres cosas que debemos hacer:
- Agarra y elimina el primer color de la matriz.
- Establezca la variable CSS con el valor que obtenemos de la matriz
- Empuje la variable de color del paso 1 para que ahora esté en la parte inferior de la matriz
Esto nos dará la función de rotación de colores.
Aquí está mi función completada:
window.addEventListener("mousedown", (e) => {
const color = colors.shift();
document.documentElement.style.setProperty("--highlight-color", color);
colors.push(color);
});
Entrar en el modo de pantalla completa Salir del modo de pantalla completa
Hemos hecho referencia a una variable CSS llamada —highlight-color pero aún no lo he definido.
En su CSS, defina la variable e inicialícela para null.
:root {
--highlight-color: null;
}
Entrar en el modo de pantalla completa Salir del modo de pantalla completa
Finalmente, apunte al ::selection selector y ajuste el background propiedad al valor en la variable CSS.
::selection {
background: var(--highlight-color);
}
Entrar en el modo de pantalla completa Salir del modo de pantalla completa
¡Y ahí vamos! Aquí está el bolígrafo final, ¡no dude en probarlo!
Ver la pluma 🎨 Cambio de color de resaltado de texto 🎨 por Braydon Coyer
(@braydoncoyer) sobre CodePen.
Como siempre, si quieres más contenido como este, sígueme en Gorjeo ¡y asegúrese de suscribirse a mi boletín de noticias para futuros artículos y tutoriales!