Last Updated: February 25, 2016
·
883
· jlukic

Rainbow'ify Your Site

Ever see a custom text highlighting color on a website and think, damn that's cool?

Why limit yourself to one color? You can specify a different text highlighting color individually for multiple selectors on a page.

Why not make headers highlight yellow and paragraphs red?

/* text selected turns highlighted yellow */
::-webkit-selection {
  background-color: #FFFFCC;
  color: #555555;
}
::-moz-selection {
  background-color: #FFFFCC;
  color: #555555;
}
::selection {
  background-color: #FFFFCC;
  color: #555555;
}
/* headers selected turn red */
h1::-moz-selection,
h2::-moz-selection,
h3::-moz-selection {
  background-color: #F1C1C2;
  color: #222222;
}
h1::selection,
h2::selection,
h3::selection {
  background-color: #F1C1C2;
  color: #222222;
}