🎯 CSS选中文字颜色生成器

⚙️ ::selection 样式设置

设置文字被选中时的背景色和文字颜色。

100%

👁️ 实时预览

选中下方任意文字,查看自定义的选中样式效果。拖拽选择试试看!

📖 请选中这段文字查看效果

用鼠标拖拽选中这段文字——文字背景色和文字颜色将变成你在左侧设置的颜色。这是CSS ::selection 伪元素的强大之处,它可以让你完全控制网页中文字被选中时的视觉样式。

💡 小提示: 可以试试选中这个高亮区域和上方文字,观察选择器范围不同带来的差异。

良好的选中样式设计能提升品牌统一性,改善阅读体验,让用户在复制文本时感受到精心设计的细节。许多知名网站如Twitter、GitHub都使用了自定义的选中样式。

💻 CSS代码

📖 CSS ::selection 详解

::selection CSS 伪元素用于修改用户在页面中选择文字时的显示样式。通过它你可以打造品牌化的选中体验。

可用属性

设计建议

浏览器兼容性

::selection 在 IE9+ 及所有现代浏览器中均支持。Firefox 62以下需使用 ::-moz-selection 前缀。