See this fiddle in Opera: http://jsfiddle.net/mzk3X/

You can see that the color in the animation makes a weird shift to dark. This happens if the background is set to transparent.

Here’s the problem fixed (background set): http://jsfiddle.net/mzk3X/1/

The default dark blue text selection background that is the default in most browsers might not always be compatible with your website design. Changing those colors to something more suitable might add a nice touch to the website.

It’s pretty simple to do, as demonstrated in the code snippet below. It’s supported by all major browsers and their versions over the last few years, with the exception of Internet Explorer, it only works in IE9.

::selection {
    background: #800;
    color: #fff;
}

::-moz-selection {
    background: #800;
    color: #fff;
}

Notice how the ::-moz-selection selector is in a different rule set. It only works if it’s the only selector in its rule set.

With modern browsers there comes the ability to do more graphical elements without using images, etc. Here’s a quick tip on how to create a CSS-arrow to be used in e.g. lists.

All we do is set a border for an element. However, to reduce the non-semantic markup, we’ll use pseudo-elements, specifically :before.

Basically we add a thick border to :before and position it. Here’s a screenshot of how the differently colored borders create triangles (jsfiddle):

Now we set the border-color to transparent so that only the preferred triangle is visible (jsfiddle). Here’s the result, with minor re-positioning: