Style highlighted / selected text - CSS Tutorial

Date: 26th October 2008 at 12:56 pm | Filed under: scripts | Author: Sam Burdge

Ever wondered how to change the default style of highlighted or selected text in your html page? I have found that this is possible using CSS3, although IE has no support for this so it doesn't work at all in IE.

In this example the background is set to green and the text set to white. Drag over this text to highlight it.

Here's the CSS:

/* Safari */
::selection {
background: #000000;
color: #ffffff;
}
/* Firefox */
::-moz-selection {
background: #000000;
color: #ffffff;
}

::selection is supported by the latest versions of Opera and Firefox 2 and upwards. ::-moz-selection is supported by the latest versions of Safari.

Leave a Comment

Removing defualt borders from links in Firefox (CSS)

Date: 14th January 2008 at 6:13 pm | Filed under: development, scripts | Author: Sam Burdge

One of Firefox's default styles is to put a dotted line border around active links. For many sites this is not an issue, and can even be helpful to the user, making it clear when they have clicked on a link. However, with some sites, especially when using images as links in the nav, it can look really ugly. To get rid of the dotted borders use the following CSS:

a:active, a:focus {outline: 0;}

3 Responses to “Removing defualt borders from links in Firefox (CSS)”

Leave a Comment