打开一个页面,选中一段文字,会出现系统默认的蓝色背景和白色文字,如下图:

那么 这种选中效果我们怎么去自定制呢,比如我想让文字选中的时候背景是绿色,文字是白色

我们在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改变鼠标选中文字的样式的更多相关文章

  1. html body标签的几个属性 禁用鼠标右键,禁用鼠标选中文字等

    <body oncontextmenu='return false' ondragstart='return false' onselectstart ='return false' onsel ...

  2. 从零开始,开发一个 Web Office 套件(9):拖动鼠标选中文字 Edge Case

    这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...

  3. [原创作品]html css改变浏览器选择文字的背景和颜色

    又很久没有'剥壳'了,最近在为一家公司做一个生产管理解决方案.所以都很忙.今天的话题很简单,就做一个很简单的网页特效.今天偶然浏览到一个网站,他们在选择文字时,样子不是蓝背景和白色字体那么单调,感觉这 ...

  4. jQuery实现鼠标选中文字后弹出提示窗口效果

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  5. CSS 鼠标选中文字后改变背景色的实现代码

    废话不多说,直接上代码 ::-moz-selection{background:#93C; color:#FCF;} ::selection {background:#93C; color:#FCF; ...

  6. 用css改变console.log的输出样式

    console.log允许你通过css来格式化输出,格式如下: console.log('%c字符串[%c字符串]', 样式1, [样式2]) 其中"%c"为模板字符串 例子: 1 ...

  7. 天坑之路:用js给选中文字添加样式

    前言 本例基于react,但是实际上就是用原生js做的.兼容性做到了IE9,但是按照这个思路做是可以做到IE8甚至更低的. 需求与最初的思路 当我拿到这个需求的时候以为很简单,就是可以给页面上的文章做 ...

  8. CSS 改变文本选中颜色

    改变文字颜色 ::selection {    background: #f88;    text-shadow: none;    color: #000;}::-moz-selection {  ...

  9. 【css2、css3】css改变select选择框的样式

    效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

随机推荐

  1. Ubantu16.04一键部署Cacti监控服务器

    Ubantu16.04一键部署Cacti监控服务器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 欢迎加入高级运维工程师之路:598432640 一.查看系统环境(关于该系统的安装 ...

  2. C# 文件重命名

    记得C# File类中是没有rename这个方法 所以网上很多都用的是move moveTo copy+delete等这些方法 其实以上的方法 虽然可以实现功能 但看起来总觉得很蛋疼 今天百度 突然发 ...

  3. Java工程师三大框架面试题汇总

    1. Hibernate3 提供了属性的延迟加载功能? 当Hibernate在查询数据的时候,数据并没有存在与内存中,当程序真正对数据的操作时,对象才存在与内存中,就实现了延迟加载,他节省了服务器的内 ...

  4. 基于Centos7+Nginx+Tomcat8的负载均衡服务器的搭建

    由于工作的需求,在使用中,需要搭建负载均衡,研究了Apache+Tomat负载均衡的方案,并且通过检索相关的文章,进行了比较发现,Apache负载负载均衡在使用的效率上,远远不如Nginx的效率高,因 ...

  5. 一个python的计算熵(entropy)的函数

    计算熵的函数: # -*- coding: utf-8 -*- import math #the function to calculate entropy, you should use the p ...

  6. java线程池ThreadPoolExecutor理解

    Java通过Executors提供四种线程池,分别为:newCachedThreadPool创建一个可缓存线程池,如果线程池长度超过处理需要,可灵活回收空闲线程,若无可回收,则新建线程.newFixe ...

  7. vue.js 渲染完成回调

    vue.js渲染完成后,想触发一些事情,写在哪里呢? 答案是mounted 例子: new Vue({ el:'#demo', data:{ text:'Hello' }, mounted:funct ...

  8. AngularJs自定义指令--执行顺序 (原文:http://www.cnblogs.com/sagacite/p/4624227.html)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. PMP考试

    今天是第二次PMP模拟考试,得了146分,比上次高25分,这次题目相对简单些,看来昨晚的复习没有白费,还是有效果的. 有些题目影响还是比较深刻,老外的项目管理思想是先规划好一切再执行(管理),比如信息 ...

  10. iOS 图片轮播图(自动滚动)

    iOS 图片轮播图(自动滚动) #import "DDViewController.h" #define DDImageCount 5 @interface DDViewContr ...