CSS3 implementation changes the color selected by default text

This default color can also be changed, this article we learn how to use the CSS3 implementation to change the default text selected color?
About browser text Check colors
With my system example (XP default theme), the browser page text selected after the default background color is a blue, different browser colors have some differences, but roughly the same, the text color is almost white, as shown in the following figure, truncated from Firefox3.6 browser:

In CSS3 's father and mother have no blind date, to change the page text selected after the background color and text color, and let the eunuch have a child as difficult. But, with CSS3 born, getting more and more browser recognition, everything seems so natural. Although some stubborn old man (ie browser) does not recognize the new CSS3, but it does not affect the other browsers on the UI for another improvement.

Currently Firefox, Safari, Chrome, and opera browsers support text selection properties, and if the browser does not support the attribute, it will be ignored directly, so it will not have any adverse effects.

Here's a quick demonstration of the tips for improving the UI experience.

Second, change the default selected color
First of all, the simple point of the example, we can set the entire page text to select the basic style, as follows:

:: Selection {
Background: #d3d3d3;
Color: #555;
}

::-moz-selection {
Background: #d3d3d3;
Color: #555;
}

::-webkit-selection {
Background: #d3d3d3;
Color: #555;
}
As a result, the default blue background selected for text is dimmed, as shown in the following illustration, from the Chrome browser:

Of course, we can use the CSS selector to specify the style status of the selected label content text, such as the Maroon selection shown below:

. maroon::selection {
Background:maroon;
Color: #fff;
}

. maroon::-moz-selection {
Background:maroon;
Color: #fff;
}

. maroon::-webkit-selection {
Background:maroon;
Color: #fff;
}
<p class= "Maroon" ... Text content. </p>
You get an effect similar to the following diagram:

In the same way, you can specify the CSS selector and the selected style of the content text/picture, depending on your needs.

Iii. Conclusion
This article is only a technical exchange, the actual work whether use still depends on the specific situation, in the commercial website I will never use: selection to change the text selected style, if personal website or design class site is very likely to use this property to let the site graced. Of course, each person in the process of page refactoring is not the same place, so, to: selection attitude only represents a personal point of view.