加载中…
个人资料
z17fly
z17fly
  • 博客等级:
  • 博客积分:0
  • 博客访问:97,874
  • 关注人气:13
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
正文 字体大小:

css3应用之自定义选中文字的背景颜色

(2012-05-30 14:33:55)
标签:

杂谈

分类: CSS

在看很多的博客主题时候发现大多数都对选中文字的背景颜色做了相应的处理。其实这样是很符合用户体验的。因为有很多的人会用鼠标选择着一行一行的阅读。其中就包括本人。。。

浏览器中默认的选中的文字颜色为白色,背景色为蓝色。

我们如何自定义呢?

效果参见本博客,选中文字后可以见到效果。本博客中用到的代码是

body ::selection {color:#FFFFFF;background-color:#C2300B;text-shadow:none;}
body ::-moz-selection {color:#FFFFFF;background-color:#C2300B;text-shadow:none;}

注意这里是两个冒号,不同于一般伪类的单冒号,此属性应用的css3属性

body标签可以根据需要修改。color是选中后文字的颜色,background-color为选中文字的背景色。由于本站文字采用了text-shadow属性,而在文字选中后阴影会导致文字模糊,所以这里将阴影去掉。

ok,就这么简单。其他可以自由发挥了。。。


注意要点:

  • ie6,7,8版本不支持此属性,ie9,10未测试。
  • firefox和其他webkit浏览器,实现代码有不同(body::-moz-selection{background-color:#C2300B;}
  • fierfox中选中的文字存在间距,chrome中为整块选中状态,行与行之间不存在间距。

 

0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有