Wednesday, 29 October 2014

Change the styles of the selected area usign CSS

This tutorial demonstrates how to use the ::selection selector, which allows you to set different font and background color for the marked area. The default is black fonr color and blue background. Now let us show You how to change that.

First we simply call the ::selection selector.

::selection {
// You can add only 2 properties : color, background 
}

NOTE:
The ::selection selector is not supported in Internet Explorer 8 and earlier versions.

Firefox support the ::selection selector, but the -moz- vendor prefix is required.( ::-moz-selection )


EXAMPLE:

<html>
<head>
<title>::selection selector</title>
<style>

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

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

</style>
</head>
<body>

<p>This is a simple example.</p>
<p>Shows you how to use ::selection.</p>
<p>You can change the color.</p>
<p>Also the background.</p>
<p>Enjoy with our Tips & Tricks every day.</p>

</body>
</html>


DEMO cannot be added because it will effect to the other elements of the page.