7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 20Length: 1.2 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.2 Change Text Selection Color

In this lesson I’ll show you how to change the text selection color. It’s this one right here (example). When you select a piece of text in the browser you get this blue background around the text you selected.

But what if you want your own style for that? Well, up until CSS3 this wasn’t really doable. But now, you can use the ::selection pseudo-element to target that specific state.

2.2 Change Text Selection Color

In this lesson I'll show you how to change the text selection color. It's this one right here. When you select text you get this blue background around the text you just selected. But what if you want like your own style for that? Well up until CSS3 this wasn't really doable. But now you can use the selection pseudo element to target that specific state. So, here's an example, I'm gonna go here in lesson two dot CSS. And I'm gonna do this, selection and I'm gonna change the background color. Let's say to red. And also, the color to white. All right, so now whenever, refresh, whenever I select something, it's changed. It doesn't matter where it is. It's gonna change the whole selection styling. Now this right here doesn't work on Mozilla. As you can see, this is the default styling. To compensate for that, you gotta do this, moz-selection. So it's just a matter of adding the correct vendor prefix. So background color red and again color white. All right let's go back, refresh and now it also works in Firefox. So just with these two rules here we can target pretty much all the browsers. And support for this element is pretty widespread, it works on all major browsers Except I8. And accept mobile browsers.

Back to the top