Changing Text Highlight Color in CSS

Posted on
6,194 Points
Last Modified:
Experience Level: Beginner
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS

Video Steps

1. Begin by defining the selected text as an element in CSS by typing "::selection"

2. Style the ::selection element's font color with the "color:" property, the same as any other element

3. Style the selection element's highlight with the "background-color:" property. The default color for most browsers is blue

4. For maximum browser compatibility, copy the entire element's style and instead of "::selection" type "-moz-::selection"


Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Join & Write a Comment

Suggested Videos

Title Views Activity
Using z-index Positioning in CSS 109
Creating an Image Sprite 76
Alpha Transparency in CSS 55
Lists and Links 95
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month