用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 ...
随机推荐
- 闲说HeartBeat心跳包和TCP协议的KeepAlive机制
很多应用层协议都有HeartBeat机制,通常是客户端每隔一小段时间向服务器发送一个数据包,通知服务器自己仍然在线,并传输一些可能必要的数据.使用心跳包的典型协议是IM,比如QQ/MSN/飞信等协议. ...
- c语言第8次作业
#include<stdio.h> int main() { ]={}; int m; ; ;m<;m++) { a[m]=m+; !=&&a[m]%!=) n++; ...
- WPF中Grid绑定DataTable数据。
1.首先引用DocumentFormat.OpenXml.dll 2.然后新建一个OpenExcelHelper类,将Excel转化为Datatable. /// <summary> ...
- PL/SQL Developer安装详解(32位客户端免安装版)
PL/SQL Developer是一个集成开发环境,专门开发面向Oracle数据库的应用.PL/SQL也是一种程序语言,叫做过程化SQL语言(Procedural Language/SQL).PL/S ...
- sublimeText jsformat 插件被当做病毒 virus
最近在个只可往他里面发邮件,不能往外上任何互联网的地方工作,用 sublimetext 要装个sublime 插件 jsformat 十分麻烦.用gmail邮箱发总是报病毒. 最后挨个尝试,发现是 j ...
- 比较器:Compare接口与Comparator接口区别与理解
一.实现Compare接口与Comparator接口的类,都是为了对象实例数组排序的方便,因为可以直接调用 java.util.Arrays.sort(对象数组名称),可以自定义排序规则. 不同之处: ...
- Python多重装饰器
多重装饰器,即多个装饰器修饰同一个对象[实际上并非完全如此,且看下文详解] 1.装饰器无参数: >>> def first(func): print '%s() was post t ...
- php 读取输出其他文件的方法
ob_start();iconv('utf-8','gb2312',readfile('1.html')); //直接输出文本内容echo '<hr>'; $data = file_get ...
- Microsoft Azure 云存储服务概念
本文包括了以下几点内容: 什么是Azure云存储服务? 云存储服务分类 云存储服务的优势 什么是Azure云存储服务? Azure 云存储服务可以说是Azure 上最重要的SAAS服务了. 在Azur ...
- 自己动手写ORM框架
提起ORM框架,大家都很熟悉,网上流行的ORM框架有很多,其中出名的有一些,不出名的更是数不胜数. 下面是自己实现的一个简单的ORM框架,实现了常用的增删查改功能,供大家研究ORM实现原理. 功能描述 ...