Stunning Snippet – CSS Text Selection

We’re all familiar with the classic blue color scene when you highlight text in your browser. Essentially the text turns white, and the background turns blue. What a surprisingly large portion of people don’t know is that you can control this with CSS. Okay, you don’t have absolute control over it, since it only works in Webkit and Gecko based browsers, but think of it as an extra treat for the people using those browsers. You’ll notice that if you highlight any text on this blog, it gives you a nice green background with white text. This is an important, yet often overlooked element of the design. It keeps everything standard, rather than looking like it was hacked together. Ok, enough talking, this is how you can get it to work on your website.

::selection {										background: #7fc548; color: white;text-shadow:none;/* Safari */}
::-moz-selection {										background:#7fc548; color: white;text-shadow:none;/* Firefox */}

You can use other properties to customize the ::selections pseudo class, but it isn’t recommended. You don’t want the padding of elements changing when you highlight them now do you?