用css改变鼠标选中文字的样式
打开一个页面,选中一段文字,会出现系统默认的蓝色背景和白色文字,如下图:
那么 这种选中效果我们怎么去自定制呢,比如我想让文字选中的时候背景是绿色,文字是白色
我们在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的文字效果斤作用于 背景颜色(不包含背景图片) 字体颜色,不作用与 字体大小,字体样式,字体粗细等等
用css改变鼠标选中文字的样式的更多相关文章
- html body标签的几个属性 禁用鼠标右键,禁用鼠标选中文字等
<body oncontextmenu='return false' ondragstart='return false' onselectstart ='return false' onsel ...
- 从零开始,开发一个 Web Office 套件(9):拖动鼠标选中文字 Edge Case
这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...
- [原创作品]html css改变浏览器选择文字的背景和颜色
又很久没有'剥壳'了,最近在为一家公司做一个生产管理解决方案.所以都很忙.今天的话题很简单,就做一个很简单的网页特效.今天偶然浏览到一个网站,他们在选择文字时,样子不是蓝背景和白色字体那么单调,感觉这 ...
- jQuery实现鼠标选中文字后弹出提示窗口效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- CSS 鼠标选中文字后改变背景色的实现代码
废话不多说,直接上代码 ::-moz-selection{background:#93C; color:#FCF;} ::selection {background:#93C; color:#FCF; ...
- 用css改变console.log的输出样式
console.log允许你通过css来格式化输出,格式如下: console.log('%c字符串[%c字符串]', 样式1, [样式2]) 其中"%c"为模板字符串 例子: 1 ...
- 天坑之路:用js给选中文字添加样式
前言 本例基于react,但是实际上就是用原生js做的.兼容性做到了IE9,但是按照这个思路做是可以做到IE8甚至更低的. 需求与最初的思路 当我拿到这个需求的时候以为很简单,就是可以给页面上的文章做 ...
- CSS 改变文本选中颜色
改变文字颜色 ::selection { background: #f88; text-shadow: none; color: #000;}::-moz-selection { ...
- 【css2、css3】css改变select选择框的样式
效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
随机推荐
- MWeb 1.4 新功能介绍一:引入文件夹到 MWeb 中管理,支持 Octpress、Jekyll 等静态博客拖拽插入图片和实时预览
之前在 MWeb 中打开非文档库中的 Markdown 文档,如果文档中有引用到本机图片,是没办法在 MWeb 中显示出来和预览的.这是因为 Apple 规定在 Mac App Store(MAS) ...
- Hive:Spark中如何实现将rdd结果插入到hive1.3.0表中
DataFrame写入hive API: registerTempTable函数是创建spark临时表 insertInto函数是向表中写入数据,可以看出此函数不能指定数据库和分区等信息,不可以直接进 ...
- spring4 离线doc和api(自制)
spring mvc api 文档(英文版) 链接: https://pan.baidu.com/s/1c25Ml4 密码: ufb9 spring MVC 学习文档(英文版) 链接: https:/ ...
- iOS8.3发布了Swift 1.2带来哪些新变化
苹果前几日在面向开发者推送iOS 8.3 Beta的同时,还发布了版本号为6D520o的Xcode 6.3 Beta,其中便包含了iOS 8.3 Beta和OS X v10.10 SDK,并进一步提升 ...
- Android 子线程测试
private volatile boolean mStopped = false; private int i; TextView tv1; TextView tv2; @Override prot ...
- java equals和==的区别
大概说equals和==都比较的是什么: 1. boolean tem = a == b; 首先==比较的肯定是地址,从堆栈的角度说也就是说==比较的是栈上面的内容.因为栈是用来存放地址或是java中 ...
- Centos7上启动vpn客户端失败问题处理
在某台云主机上(Centos7)搭建vpn客户端,发现一直启动失败,检查了下日志,报错如下: Sat Jan :: WARNING: Your certificate is not yet valid ...
- win7下matlab2016a配置vlfeat
1.下载vlfeat http://www.vlfeat.org/ 2.解压到了matlab安装目录的toolbox下 3.打开vs2013的这个 4.输入nmake version 查看我的版本是 ...
- Ubuntu 16.04应用布署小记
本系列文章记录了升级Ubuntu 16.04的布署过程 回到目录 10. Dokuwiki 将虚拟目录配置文件链接到Apache2的可用的配置文件库中 sudo ln -s /opt/dokuwiki ...
- activity的四种加载模式
在android里,有4种activity的启动模式,分别为: standard, singleTop, singleTask和singleInstance, 其中standard和singleTop ...