Use CSS3 to change the default color of text selection--Zhang Xin Xu

about browser text Check color

With my system example (XP default theme), the browser on the page text is selected after the default background color is a blue, different browser color is slightly different, but roughly the same, the text color is almost white, as shown, truncated from the Firefox3.6 browser:

In CSS3 's father and mother did not know the date, to change the text on the page after the selection of the background color and text color, and let the eunuch born as difficult as children. However, with the CSS3 born, get more and more browser recognition, everything seems so natural. Although some stubborn bad old man (ie browser) does not recognize the new CSS3, it does not affect the UI improvements on other browsers in the slightest.

Currently Firefox, Safari, Chrome, and opera browsers all support text selection properties, and if the browser does not support this property, it will ignore it directly, so it will not have any adverse effects.

Here's a quick tip on how to improve the UI experience.

Second, change the default selected color

First, the simple point example, we can set the entire page text selection of 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 of the text selection becomes a light gray, as shown in the Chrome browser:

Of course, we can use the CSS selector to specify the style state 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>

Will get a similar effect:

In the same way, you can specify the CSS selector as well as the selected style of the corresponding content text/picture, depending on your needs, here is not an example.

Compatibility (supplemented in 2016-01-04)
ie9+ browsers support ::selection that this attribute should be known and used by more people, given the smaller share of IE8 and its browsers below.

Third, Instance page

You can really click here: CSS3 change text Select default Style demo

Iv. Conclusion

To be honest, I would never use: selection to change the style of text selection in a real business project, and it would be very likely to use this property to make the site graced if it was a personal site or a design site. Of course, everyone in the process of page refactoring is not the same place to focus, so, to: selection's attitude represents only a personal point of view.

This article does not actually have any content, the small skill shows only. If there is any inaccuracy in the text of the place welcome to correct, also welcome through the comments to communicate.

Original article, reprint please indicate from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com]
This address: http://www.zhangxinxu.com/wordpress/?p=1147

Use CSS3 to change the default color of text selection--Zhang Xin Xu