Question. 问题
类似于企业展示站、特色商城这样的面向用户的系统,前端的显示效果显得尤为重要,从细节入手,一个好的细节优化,可以让用户用着很舒服,从而认可你的网站和你的产品。
下面是一个网站的一个文章页面,面对一大段页面上的文字,很多用户都会有这样的习惯,顺手去选中觉得写得好的文字段落,但是浏览器默认的选中文字后的效果是白色的字配合深蓝色的底,视觉效果并不是很友好,好在我们可以使用 CSS3 来改变它默认的效果。
Solution. 解决
实现图中的效果很简单,使用 CSS3 的 ::selection 选择器。这个选择器是对于用户选中的元素(这里可以简单的理解为文本)设置 CSS 样式,通过这个选择器我们把文字的颜色和背景色重新设置为我们需要的颜色就可以。
以下是一段完整的代码:
<!DOCTYPE html>
<html>
<