CSS修改选中文本颜色与背景色
壹 ❀ 引
在做博客美化的时候,想着去修改文本选中的背景色,因为网页默认是蓝底白字,看着与自己博客整体配色不太搭配,所以想着去改改。

贰 ❀ ::selection
解决方案其实很简单,使用css3 ::selection属性,该属性用于匹配元素中被用户选中或处于高亮状态的部分,并且支持修改匹配元素的color, background, cursor,和outline属性。
我在博客设置添加了如下代码:
::selection {
color: #fff;
background: #088;
}
那么现在博客文本选中就是这个样子了:

叁 ❀ 兼容
由于是css3属性,所以简单看下PC端浏览器兼容性:

一片绿色,IE9之后完全支持,需要注意的是,火狐61之前得添加-moz-前缀,这个操作可以交给前端构建工具去做。
::-moz-selection{}
那么就记录到这里了。
CSS修改选中文本颜色与背景色的更多相关文章
- win32 修改Edit控件文本颜色与背景色
#define WM_CTLCOLORMSGBOX 0x0132 #define WM_CTLCOLOREDIT 0x0133 //编辑控件Edit #define WM_CTLCOLORLISTBO ...
- 前端开发css禁止选中文本
在我们日常的Java web前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...
- css 修改placeholder字体颜色字体大小 修改input记住账号密码后的默认背景色
壹 ❀ 引 本来这个阶段的项目页面都是给实习生妹子做的,我只用写写功能接接数据,但这两天妹子要忙翻译,这个工作阶段也快结束了导致有点慌,只能自己把剩余的几个小页面给写了. 那么做页面的过程中,UI也 ...
- css 禁止选中文本
css 如何禁止选中文字 .noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* ...
- css 修改placeholder的颜色
input::-webkit-input-placeholder { color: #ff0000; } input::-moz-input-placeholder { color: #ff0000; ...
- CSS 鼠标选中文字后改变背景色的实现代码
废话不多说,直接上代码 ::-moz-selection{background:#93C; color:#FCF;} ::selection {background:#93C; color:#FCF; ...
- pycharm修改选中字体颜色
File->Setting->Editor->Color Scheme->General Scheme:Monokai 在方框内: Editor->Section Bac ...
- 【css3】如何自定义 placeholder 文本颜色
昨天写了一篇基于 jquery 实现 ie 浏览器兼容 placeholder 效果,具体内容点击传送门.不过还是有点小瑕疵,就是不能设置 placeholder 文本颜色.本文主要介绍利用 css ...
- QTextEdit中选中文本修改字体与颜色,全部文本修改字体与颜色(设置调色板的前景色、背景色、文字颜色以及基色)
----我的生活,我的点点滴滴!! 当然以下内容都可以通过设置样式来达到目的,但是下面不使用这样的方法 先来看张图,理解此图基本就能实现上面所要达到的目的了 Widget::Widget(QWidge ...
随机推荐
- centos重启出现type Control-D to continue【fsck使用】
VMware vSphere克隆异常/dev/sda2:UNEXPECTED INCONSISTENCY; RUN fsck MANUALLY.(i.e.,without -a or -p optio ...
- GIL以及协程
GIL以及协程 一.GIL全局解释器锁 演示 ''' python解释器: - Cpython c语言 - Jpython java 1.GIL:全局解释器锁 - 翻译:在同一个进程下开启的多个线程, ...
- 单域MPLS 虚拟私有网络的整个详解配置过程(可跟做)
1.PE1和P和PE2之间跑IGP协议 运营商里面首选的还是ISIS协议我们实验的话,用的是OSPF协议 R3的IP地址和OSPF配置 [R3]display ip int brief *down: ...
- EasyExcel示例(阿里巴巴)基于Maven
首先感谢阿里巴巴提供了easyexcel工具类,github地址:https://github.com/alibaba/easyexcel 注意!!这里只是一个简单的示例,VC大法即可使用,对于复杂的 ...
- 《软件安装》VMware Workstation 不注册 下载
问答环节 问:为什么要下载安装VMware Workstation 答:VMware Workstation 可以安装虚拟机,我们可以把我们安装的一些软件装在虚拟机上面,防止自己的电脑卡顿(软件装多了 ...
- [C]链接和生存周期
链接和生存周期的区别: 链接是标识符的属性: 生存周期是对象的属性: 链接可以是外部(external),内部(internal)或没有(none): 生存周期可以是自动的.静态的,或已分配的(all ...
- Selenium(四):CSS选择器(一)
1. CSS选择器 前面我们学习了根据 id.class属性.tag名选择元素. 如果我们要选择的元素没有id.class 属性,或者有些我们不想选择的元素也有相同的id.class属性值,怎么办呢? ...
- 使用laravel-amdin调用文件上传阿里oss注意点
开发者工作中,项目代码开发提高效率,往往会使用一些github上面的一些扩展类,这里举例说明一下遇到的情况. 一.使用laravel-admin框架开发管理后台文件或者图片上传 情景:运营或者产品通过 ...
- Dynamics CRM - js中用webapi基于fetchxml查询遇到的问题 -- Invalid URI: The Uri scheme is too long.
最近用WebApi做基于Fetchxml的查询的时候,遇到一个很蛋疼的报错:Invalid URI: The Uri scheme is too long. 检查了整个URL,也没发现有什么问题. - ...
- php 7.1.32 +Apache 2.4 配置 (x64)
最近phpstudy 后门事件一出,吓得小编瑟瑟发抖,决心自己配置环境不再用集成环境. 一.apache 配置 首先我们先去apache 官网下载apache apache2.4地址:https:// ...