I have seen that the color and background color of selected content on some websites are not the usual blue and white. I was interested in checking it out today. It turned out to be a very simple usage of CSS3 selector::selection.
Example above:
<style> .selectColor::selection{color:#fff;background:pink;} .selectColor::-moz-selection{color:#fff;background:pink;} .selectColor::-webkit-selection{color:#fff;background:pink;}</style><body> <p>普通文本,不设置::section,选中时文本的颜色为白色,背景色为蓝色</p> <p class="selectColor">选择文本的颜色为白色,背景色为粉色</p></body>
Only a few CSS properties can be applied to the ::selection selector: color, background, cursor and outline .
Browser support:
The ::selection selector is supported in IE9, Opera, Google Chrome and Safari.
Firefox supports alternative ::-moz-selection.