Change the default Background Color of Text on Selection with CSS
Here’s another interesting thing you can do with your CSS to style your website. We’ve all selected text from a webpage with our cursor before right? But most likely you never put any thought into what the default background color of the text was when you were selecting it. That is unless the website has a blue background and you can’t see what you’re selecting because the default background color of text on selection is blue, causing it to blend in.
Lets get right to the example I set up so you can see what I’m talking about. Not only can you control the background color of the text when you select it with your cursor, but you can also change the color of the text itself on select.
So I’m not even going to get into the whole “This only works in this browser, this version, blah blah”. I assume anyone using this website knows the ins and outs of browsers and uses a real browser. That being said, here is the code I used to change the colors on the demo page.
background:#F3F;
}
#second p::-moz-selection {
background:#F3F;
}
#third p::selection {
background:#F93; color:#339;
}
#third p::-moz-selection {
background:#F93; color:#339;
}
#forth p::selection {
background:#000; color:#FFF
}
#forth p::-moz-selection {
background: #000; color:#FFF
}
So that’s all there is to it. One of those things that might not make or break a website, but is a nice touch to make your site even more custom, or perhaps even more user friendly.
