How To Change The Highlight and Selection Text Color On Your Website

Posted Apr 12, 2012

One of the latest CSS trends is changing the highlight text selection color on websites. We just changed the text color on Pulse2.com ourselves.  Here is a code snippet of how it works:

/* Highlights different color for Mozilla based browsers */
::-moz-selection {
       background-color: #9e0000;
       color: #ffffff;
}

/* Highlights different color for Safari based browsers */
::selection {
       background-color: #9e0000;
       color: #ffffff;
}

The “background-color” is the color of the background that you want for the highlight. The “color” portion of the code is the text color. If you want a list of hexadecimal colors, I would recommend using December.com.