Put some funk on selected text

<transmission>

After highlighting some text in a comment on Dribbble I was reminded that you can stylize selected text. I found the code for this simple styling on Quirksmode. This site is a great resource when fine-tuning CSS, especially when considering browser compatibility. This particular trick apparently doesn’t work in Internet Explorer, but hey, I’m all for progressively enhancing a site through CSS.

Simple but sweet

First, try highlighting the paragraph above. You will see the basic styling I defined for selected text, as well as styling for links including the hover state. The CSS is simple:

• ::-moz-selection { background:#47b3b3; color:#fff }
• ::selection { background:#47b3b3; color:#fff }
• a::-moz-selection { background: #ff734c }
• a::selection { background: #ff734c }
• a:hover::-moz-selection { background: #fff; color:#ff734c }
• a:hover::selection { background: #fff; color:#ff734c }

Of course, as you define this styling for your own site, be sure and check out the differences between browsers. I’ve checked in Chrome and Firefox, and there are some slight differences.

Joy in the details

For me, it’s all about the details. This will probably become a standard for my future projects. Got a trick you’ve learned lately? Please share it with me in the comments below.