设置文字被选中时的背景色和文字颜色。
选中下方任意文字,查看自定义的选中样式效果。拖拽选择试试看!
用鼠标拖拽选中这段文字——文字背景色和文字颜色将变成你在左侧设置的颜色。这是CSS ::selection 伪元素的强大之处,它可以让你完全控制网页中文字被选中时的视觉样式。
良好的选中样式设计能提升品牌统一性,改善阅读体验,让用户在复制文本时感受到精心设计的细节。许多知名网站如Twitter、GitHub都使用了自定义的选中样式。
::selection CSS 伪元素用于修改用户在页面中选择文字时的显示样式。通过它你可以打造品牌化的选中体验。
color — 选中文字的颜色background — 选中文字的背景色text-shadow — 文字阴影(部分浏览器支持)-webkit-text-fill-color — WebKit内核的文字填充色::selection 在 IE9+ 及所有现代浏览器中均支持。Firefox 62以下需使用 ::-moz-selection 前缀。