Skip to main content

Changing selection color with CSS3

CSS3 is bringing many innovations to web design. One of these is the possibility of customizing the selection color of text, graphics and every other element of the markup. By default, on most browsers, the selection color is a blue and the color of text becomes white. It is now very easy to change this behavior and add a nice touch of color to your website.
Changing the selection color can be achieved with the pseudo-element ::selection like this (a vendor prefix is still required for Firefox):
::selection {  background: rgb(131,209,222);       /* Webkit browres*/ color:#336; } ::-moz-selection { background: rgb(131,209,222);       /* Firefox */ color:#336; }
This will change the default selection color to a greenish-blue and change the color of the text to a dark blue.
The power of ::selection does not end there. It is of equal simplicity to define a different color for each element. In this example the text of the first paragraph is selected in red, the text of the second paragraph in grey and the image is selected in orange. Also there is a default yellow selection color. The effect has been achieved using this CSS3 code:
::selection {  /*default*/ background: #FFC; } ::-moz-selection {  /*default*/ background: #FFC; } .red::selection { background: #ff3737; } .red::-moz-selection { background: #ffb7b7; } .grey::selection { background: #96909f; } .grey::-moz-selection { background: #96909f; } img::selection { background: #F90; } img::-moz-selection { background: #F90; }
View live example

Browser support

At the moment the ::selection pseudo-element is supported by most modern browsers including Webkit browsers (Chrome, Safari) and Opera. It also works in Firefox, but a vendor prefix (-moz-) is required. While IE does not support it yet, its support will arrive with IE9.
Browsers that don't support it simply ignore the rule and use their default blue background and white text selection. Hence there is no reason not to implement this in your website.


Popular posts from this blog

The Increased Addictiveness of Today's Video Games

This is a guest post by Miles Walker, a freelance writer and blogger who usually  compares car insurance  deals over at CarinsuranceComparison.Org. His most recent review looked at the best  car insurance quotes . Video games have always held some addiction, but now more than ever that addiction is growing. People are spending more time than ever playing the games, and game designers are constantly finding new ways keep it that way. Their efforts have a been a complete success, and some games have true addicts, addicts who play 24 hours a week or more. Visual enhancements Video games have come a long way since a certain duo of Italian plumbers started showing up in people's houses in the late 1980s. By leaps and bounds, video game graphics have become alarmingly sophisticated. Each graphical improvement increased a game's possibilities and added more depth to video games. Designers began thriving on this depth, making games with more achievements, unlocks, levels an

Project planning in a text file

Whenever you work on a project it is important to be able to plan it ahead of time. This holds true for small and big project, from planning a trip to the spa to building a spaceship. The small project plans can be maintained in you thoughts while bigger ones require tools to help you see the big-picture of the project and manage task at a lower level. There are projects which start with a fully prepared plan and projects which pivot overnight, thus invalidating any original plan. For the latter flexibility is very important, and tools like Trello offer a great solution because they can be adjusted to fit your project. However, it may happen sometimes that the project starts adjusting to the tool or that you still want to maintain a bigger picture of the main points of the project. You may also need to produce a rough development schedule to serve as a long term road-map. I have prototyped a tool (and defined a workflow) which allows you to plan such projects. To better understa

A more confusing Internet with .brand TLDs

A few months ago, I wrote a post proposing to remove top level domains from the internet, as many people don't understand why we need TLDs. At the time I didn't know either. Removing TLDs would simplify browsing an possibly increase security by reducing phishing sites that make use of URL similarity to gain visits to potentially dangerous websites, or sites filled with ads. The ICANN, the body that manages Internet names, has for years been preparing something different but that produces a slightly similar effect than removing TLDs: allowing brands to register their own TLDs . The proposal may soon be approved has been approved . Brands would therefore be able to register their own TLDs. Google could register .google a potentially powerful TLD for their services, like Google Maps: instead of Brand TLD don't improve short urls like, but seem to be effective for use in subdomains. Registering a .<brand-name> TLD will cost