About browser text Check colors

Core Tip: browser page text selected after the default background color is a kind of blue, different browser colors have some differences, but roughly the same, the text color is almost white

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 {<br/>background:maroon;<br/>color: #fff; <br/>}<br/><br/> maroon::-moz-selection {<br/>background:maroon;<br/>color: #fff; <br/>}<br/><br/> maroon::-webkit-selection {<br/>background:maroon;<br/>color: #fff; <br/>}<br/><p class = "Maroon" ..... Text content. </p><br/><br/>

You'll 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.

Third, the conclusion

To be honest, in real business projects, I would never use: selection to change the style selected by the text, if the personal site or design class site is very likely to use this property to make 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.