欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>CSS教程

目录导航

用 css的 selection 方法修改浏览器默认选取的背景色

亚洲服务器 添加于 2013-08-05  

CSS教程

从接触网络到现在,选择的文本后的样式似乎一直都是蓝底白字,如下图(截自 Firefox 5 浏览器):

用 css的 selection 方法修改浏览器默认选取的背景色-图片1
用 css的 selection 方法修改浏览器默认选取的背景色-图片1

这一成不变的颜色,有没有让你的视觉感到疲劳。你有没有想过换成自己喜欢或者其他颜色呢?也许你会问这个可能吗?之前不可能,但现在,CSS 3 让这个成为可能。

要改变选中文本的颜色和背景颜色,需要使用 CSS3 新增的伪 ::selection,设置颜色 color 和背景颜色 background-colcr 即可,如:

::selection { color:#333; background-color:#cce8cf;}
::-moz-selection { color:#333; background-color:#cce8cf;}
::-webkit-selection { color:#333; background-color:#cce8cf;}


上面的代码效果如下图(截自 Firefox 5 浏览器):

用 css的 selection 方法修改浏览器默认选取的背景色-图片2
用 css的 selection 方法修改浏览器默认选取的背景色-图片2

当然,你也可以结合CSS选择器,指定标签或区域文本选中后的样式状态。如:

h2::selection { color:#f60; background-color:#cce8cf;}
p::selection { color:#333; background-color:#cce8cf;}

h2::-moz-selection { color:#f60; background-color:#cce8cf;}
p::-moz-selection { color:#333; background-color:#cce8cf;}

h2::-webkit-selection { color:#f60; background-color:#cce8cf;}
p::-webkit-selection { color:#333; background-color:#cce8cf;}

大部分标签使用 selection 没有问题,但 a 标签在不同的浏览器下有差异,有的浏览器 a 标签不会应用上 ::selection 样式(如 FF5,Chrome12),有些浏览器则会应用上 ::selection 样式(如 Opera 11.50)。这可能是有的浏览器认为a比较重要,为了让用户知道这是链接,所以不改变颜色
目前 Firefox、Safari、Chrome 以及 Opera 浏览器都支持 ::selection 属性,如果浏览器不支持该属性,则会被忽略它,不会产生任何不良的影响
如果你想让自己的页面更有特色、个性,不妨加上 CSS 3 ::selection 属性,设置自己喜欢的颜色,让“选择”五彩缤纷。

零度科技原文链接:http://www.ldisp.com/a/css/2013/selection.shtml

上一篇:css透明兼容,opacity兼容
下一篇:10个很棒的 CSS3 代码在线生成工具

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

0

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理