使用CSS ::selection伪元素，打造个性化文本选中效果‌

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

在网页设计中，细节往往是提升用户体验的关键。苏南大叔在浏览某大型网站的时候，发现使用鼠标选中网页上的文字的时候，显示的效果，竟然不是默认的蓝底白字。而是更符合品牌形象的浅绿色白色效果。通过翻找代码，发现其实现，是借助了CSS的::selection伪元素。

苏南大叔的“程序如此灵动”博客，记录苏南大叔的代码编程经验总结。测试环境：win10，chrome@135.0.7049.41。

::selection伪元素

::selection是CSS3引入的伪元素，专门用于‌控制用户选中文本时的样式表现‌。通过它，开发者可以覆盖浏览器默认的选中颜色和效果，实现视觉统一。

::selection {
    color: #fff;
    background: #00d7c6;
}

可用的属性

资料显示：并非所有CSS属性都能应用于::selection，目前支持的属性包括：

• 颜色相关‌：color, background-color, text-shadow

‌ - 光标效果‌：cursor（部分浏览器支持）
‌ - 描边与填充‌：stroke, fill（适用于SVG文本）
‌
不支持的属性‌，有：font-size、padding等，设置后会被浏览器忽略。

更多例子

::selection {
    background: #9c27b0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.no-highlight::selection {
    background: transparent;
    color: #000;
}
p::selection,
span::selection {
    background: #2dff5a;
    color:#fff;
}

相关文章

• https://newsn.net/say/css-input-outline.html
• https://newsn.net/say/css-first-line.html
• https://newsn.net/say/css-marker.html
• https://newsn.net/say/css-plus.html
• https://newsn.net/say/css-attr-find.html

结语

通过::selection伪元素，开发者能以极小的代码成本显著提升网页的交互质感。苏南大叔的更多css相关经验文章，请点击：

• https://newsn.net/tag/css/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。