用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 ...
随机推荐
- Linux 下多用户申请git公钥方法
问题:目前大家多是通过root用户来登录编译机,导致各自生成的公钥相互覆盖,而导致无法无法多人同时使用 解决方法: 登陆编译机添加用户 # useradd -m a00123456 进入切换为自己 ...
- Leetcode: Poor Pigs
There are 1000 buckets, one and only one of them contains poison, the rest are filled with water. Th ...
- linux--------------今天又遇到一个奇葩的问题,就是linux文件的权限已经是777了但是还是没有写入权限,按照下面的命令就解决了
查看SELinux状态: 1./usr/sbin/sestatus -v ##如果SELinux status参数为enabled即为开启状态 SELinux status: ...
- csuoj 1117: 网格中的三角形
http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1117 1117: 网格中的三角形 Time Limit: 3 Sec Memory Limit: ...
- ubuntu 15.04 安装配置 JDK1.8
1.到oracle的官网下载 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 选 ...
- BaseAdapter日常的封装
我们日常开发中BaseAdapter使用非常的多,大家有没有想过,再进一步封装,将平常使用的对象集合,利用泛型放入集合中,再也不用每次都重写那几个方法了,当然我也提供我的下载地址(https://gi ...
- there are no packages available for installation插件安装问题和如何配置浏览器的快捷键
sublime text3 在安装插件时,有时候会莫名其妙的弹出如下所示的弹窗(之前遇到了,但写的时候不知道为什么我的又可以了,这个只是出现了这个问题之后可以尝试的一个解决办法,图片就从网上找了一个) ...
- html5,加密元素
<form action=""> 账号:<input type="text" name="user"> ...
- Oracle经典SQL
最近本人整理了一些Oracle sql,现分享给大家,后续还会更新.如果有错误的地方,请指正,共同学习.贴上去的sql都是我测试过的,大家可以粘贴在自己的电脑上试试. 1.查询部门的名称,及最低收入雇 ...
- javascript的类型、值和变量
js的类型有多种分类,原始类型(数值,字符串,布尔值,null,undefined)和对象类型(object,String,Number,RgbExp等),或者是拥有方法的类型(object,Stri ...