Reemplazo del color de selección de texto predeterminado con CSS | Programar Plus

0

Una de esas declaraciones geniales de CSS3 que puedes usar hoy es ::selection, que anula el color de resaltado de texto a nivel del navegador o del sistema con un color de su elección. En el momento de escribir este artículo, solo Safari y Firefox lo admiten, y ambos de formas ligeramente diferentes. Afortunadamente, esto se puede considerar como una de esas técnicas de “mejora hacia adelante”. Es un buen toque para aquellos que usan navegadores modernos, pero simplemente se ignora en otros navegadores y no es gran cosa.

texto-selección-color.png

Aquí está el problema:

::selection {
  background: #ffb7b7; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #ffb7b7; /* Gecko Browsers */
}

Dentro del selector de selección, color y background son las únicas propiedades que funcionan. Lo que puede hacer para darle un toque extra es cambiar el color de selección para diferentes párrafos o diferentes secciones de la página.

Ver demostración

Todo lo que hice fue usar un color de selección diferente para párrafos con diferentes clases:

p.red::selection {
  background: #ffb7b7;
}
p.red::-moz-selection {
  background: #ffb7b7;
}
p.blue::selection {
  background: #a8d1ff;
}
p.blue::-moz-selection {
  background: #a8d1ff;
}
p.yellow::selection {
  background: #fff2a8;
}
p.yellow::-moz-selection {
  background: #fff2a8;
}

Tenga en cuenta que los selectores no se combinan, aunque el bloque de estilo hace lo mismo. No funciona si los combinas:

/* Combining like this WILL NOT WORK */
p.yellow::selection,
p.yellow::-moz-selection {
  background: #fff2a8;
}

Esto se debe a que los navegadores ignoran todo el selector si hay una parte que no comprenden o no es válida. Hay algunas excepciones a esto (¿IE 7?) Pero no en relación con estos selectores.

Para aun mas loco estilo, podría revelar una imagen con la selección de texto.

(Visited 3 times, 1 visits today)