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

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

我们在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. Linux 下多用户申请git公钥方法

    问题:目前大家多是通过root用户来登录编译机,导致各自生成的公钥相互覆盖,而导致无法无法多人同时使用 解决方法: 登陆编译机添加用户   # useradd -m a00123456 进入切换为自己 ...

  2. Leetcode: Poor Pigs

    There are 1000 buckets, one and only one of them contains poison, the rest are filled with water. Th ...

  3. linux--------------今天又遇到一个奇葩的问题,就是linux文件的权限已经是777了但是还是没有写入权限,按照下面的命令就解决了

    查看SELinux状态: 1./usr/sbin/sestatus -v      ##如果SELinux status参数为enabled即为开启状态 SELinux status:         ...

  4. csuoj 1117: 网格中的三角形

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1117 1117: 网格中的三角形 Time Limit: 3 Sec  Memory Limit: ...

  5. ubuntu 15.04 安装配置 JDK1.8

    1.到oracle的官网下载 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 选 ...

  6. BaseAdapter日常的封装

    我们日常开发中BaseAdapter使用非常的多,大家有没有想过,再进一步封装,将平常使用的对象集合,利用泛型放入集合中,再也不用每次都重写那几个方法了,当然我也提供我的下载地址(https://gi ...

  7. there are no packages available for installation插件安装问题和如何配置浏览器的快捷键

    sublime text3 在安装插件时,有时候会莫名其妙的弹出如下所示的弹窗(之前遇到了,但写的时候不知道为什么我的又可以了,这个只是出现了这个问题之后可以尝试的一个解决办法,图片就从网上找了一个) ...

  8. html5,加密元素

    <form action="">    账号:<input type="text" name="user">     ...

  9. Oracle经典SQL

    最近本人整理了一些Oracle sql,现分享给大家,后续还会更新.如果有错误的地方,请指正,共同学习.贴上去的sql都是我测试过的,大家可以粘贴在自己的电脑上试试. 1.查询部门的名称,及最低收入雇 ...

  10. javascript的类型、值和变量

    js的类型有多种分类,原始类型(数值,字符串,布尔值,null,undefined)和对象类型(object,String,Number,RgbExp等),或者是拥有方法的类型(object,Stri ...