用css改变鼠标选中文字的样式
2016-04-28 13:37
621 查看
打开一个页面,选中一段文字,会出现系统默认的蓝色背景和白色文字,如下图:
那么 这种选中效果我们怎么去自定制呢,比如我想让文字选中的时候背景是绿色,文字是白色
我们在css文件中插入如下代码:
再看一下效果:
这时候有些同学可能就开始想象了,是不是font-size,font-weight是不是都可以起作用?
我们来试一下:
在css里插入以下代码:
效果:
所期望的字体大小和粗细都没有效果。因为 section的文字效果斤作用于 背景颜色(不包含背景图片) 字体颜色,不作用与 字体大小,字体样式,字体粗细等等
那么 这种选中效果我们怎么去自定制呢,比如我想让文字选中的时候背景是绿色,文字是白色
我们在css文件中插入如下代码:
::-moz-selection { background: #26a69a; color: #ffffff; } ::selection { background: #26a69a; color: #ffffff; }
再看一下效果:
这时候有些同学可能就开始想象了,是不是font-size,font-weight是不是都可以起作用?
我们来试一下:
在css里插入以下代码:
::-moz-selection { background: #26a69a; color: #ffffff; font-weight: 900; font-size: 32px; } ::selection { background: #26a69a; color: #ffffff; font-weight: 900; font-size: 32px; }
效果:
所期望的字体大小和粗细都没有效果。因为 section的文字效果斤作用于 背景颜色(不包含背景图片) 字体颜色,不作用与 字体大小,字体样式,字体粗细等等
相关文章推荐
- 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理
- CSS3三维相册
- selected默认样式
- 【CSS】清浮动的10种方法与利弊分析
- css自动换行
- CSS3 calc()的运用
- css图片
- 图解CSS中position属性的定位用法
- Css中position、float和clear整理
- 使用CSS的position属性控制页面布局的入门教程
- 解析CSS编写中的属性优先级问题
- 详解CSS中的伪类与伪元素及二者间的区别
- 如何解决css帧keyframes在yuicompressor下压缩问题
- CSS层级关系
- ios 找出导航栏下面的黑线(可隐藏,改变样式等)
- css新特性 box-flex/flex 弹性盒状模型
- DIV+CSS颜色边框背景等样式
- 使用 stylelint检查CSS_StyleLint
- css3和js实现重力感应(经测试,andriod4.2支持)
- CSS3新特性,兼容性,兼容方法总结