免费在线CSS选中文字颜色(::selection)生成器。自定义文本选中时的背景色和文字颜色，支持全局和特定元素选择器。实时预览选中效果，一键复制CSS代码。无需注册。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用
Updated: 2026-07-11
⚙️ ::selection 样式设置
设置文字被选中时的背景色和文字颜色。
100%
👁️ 实时预览
选中下方任意文字，查看自定义的选中样式效果。拖拽选择试试看！
📖 请选中这段文字查看效果
用鼠标拖拽选中这段文字——文字背景色和文字颜色将变成你在左侧设置的颜色。这是CSS ::selection 伪元素的强大之处，它可以让你完全控制网页中文字被选中时的视觉样式。
💡 小提示： 可以试试选中这个高亮区域和上方文字，观察选择器范围不同带来的差异。
良好的选中样式设计能提升品牌统一性，改善阅读体验，让用户在复制文本时感受到精心设计的细节。许多知名网站如Twitter、GitHub都使用了自定义的选中样式。
💻 CSS代码
📖 CSS ::selection 详解
::selection CSS 伪元素用于修改用户在页面中选择文字时的显示样式。通过它你可以打造品牌化的选中体验。
可用属性
color— 选中文字的颜色background— 选中文字的背景色text-shadow— 文字阴影（部分浏览器支持）-webkit-text-fill-color— WebKit内核的文字填充色
设计建议
- 选中背景色与品牌色一致，强化品牌识别
- 确保选中状态与背景有足够对比度，保证可读性
- 避免使用太鲜艳的颜色作为选中背景，以免刺眼
- 暗色模式下使用浅色选中背景，亮色模式下使用深色选中背景
浏览器兼容性
::selection 在 IE9+ 及所有现代浏览器中均支持。Firefox 62以下需使用 ::-moz-selection 前缀。
常见问题
📖 请选中这段文字查看效果
用鼠标拖拽选中这段文字——文字背景色和文字颜色将变成你在左侧设置的颜色。这是CSS ::selection 伪元素的强大之处，它可以让你完全控制网页中文字被选中时的视觉样式。
浏览器兼容性
::selection 在 IE9+ 及所有现代浏览器中均支持。Firefox 62以下需使用 ::-moz-selection 前缀。