Überschreiben der Standard-Textauswahlfarbe mit CSS

Eine der coolen CSS3-Deklarationen, die Sie heute verwenden können, ist ::selection, mit der Sie die Textauswahlfarbe Ihres Browsers oder Systems durch eine Farbe Ihrer Wahl überschreiben können. Zum Zeitpunkt der Erstellung dieses Textes unterstützen nur Safari und Firefox dies, und das auf leicht unterschiedliche Weise. Glücklicherweise kann dies als eine der „Forward-Enhancement“-Techniken betrachtet werden. Es ist eine nette Geste für diejenigen, die moderne Browser verwenden, aber es wird in anderen Browsern einfach ignoriert und ist keine große Sache.

Hier ist der Haken

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

Innerhalb des Auswahlselektors sind nur die Eigenschaften color und background wirksam. Was Sie für etwas zusätzlichen Flair tun können, ist, die Auswahlfarbe für verschiedene Absätze oder verschiedene Bereiche der Seite zu ändern.

Demo ansehen

Ich habe einfach unterschiedliche Auswahlfarben für Absätze mit unterschiedlichen Klassen verwendet

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;
}

Beachten Sie, dass die Selektoren nicht kombiniert sind, auch wenn der Stilblock dasselbe tut. Es funktioniert nicht, wenn Sie sie kombinieren

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

Das liegt daran, dass Browser den gesamten Selektor ignorieren, wenn ein Teil davon für sie unverständlich oder ungültig ist. Es gibt einige Ausnahmen (IE 7?), aber nicht in Bezug auf diese Selektoren.

---

Für noch verrückteren Flair könnten Sie ein Bild bei Textauswahl anzeigen.