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

Basic cell counting and segmentation in Matlab

Counting cells manually is a tedious error prone process for humans. Given a large data set of microscopy images this task can be achieved much faster by means of basic computer vision techniques. In this tutorial we will segment cells from an image following a method similar to the one presented by Yongming Chen in 1999. The method uses basic morphological operations  and the watershed algorithm to segment the cells. Nowadays better methods for cell segmentation exist. This method was chosen for its simplicity and ease of implementation. We start with an image of cell-like structures by Anna-Katerina Hadjantonakis and Virginia E Papaioannou . A = imread('cells.jpg'); We convert the image to grayscale: I = rgb2gray(A); To be able to extract the dimmer cells, it is necessary to perform some local contrast adjustments I = adapthisteq(I); Objects on the borders can be caused by noise and other artifacts. We can eliminate objects on the borders

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

Four qualities of good graphical visualisations

1. Show the data without distorting it. 2. Present a large amount of data and remain coherent. 3. The technique used to create the graphic should not interfere with the user reasoning about the data.  4. Reveal both a broad overview of the data, but keep enough detail for the curious viewer.