- 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.
1.Introduction
1.1Welcome00:41
2.Typography
2.1Use CSS Shorthand04:05
2.2Change Text Selection Color01:50
2.3Awesome Font Stacks04:10
2.4Drop Caps03:00
2.5Style Placeholder Text02:15
2.6Remove Dotted Outline on Links02:03
3.Forms
3.1Create Custom Radio Buttons and Checkboxes06:38
3.2Create Awesome States on Form Elements04:14
4.Positioning
4.1Horizontal and Vertical Centering03:48
4.2Absolutely Center an Image03:41
4.3Properly Clear and Contain Floats05:00
5.CSS Generated Elements
5.1CSS Triangles05:14
5.2CSS Circles01:36
5.3Create a Layered Paper Effect05:30
5.4Get Creative With the List Bullets05:24
6.Useful Techniques
6.1Create a Fixed Back to Top Button03:35
6.2Even and Odd Rows03:36
6.3Create Fluid Images01:41
7.Conclusion
7.1Recap01:47
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.
