壹 ❀ 引

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

 贰 ❀ ::selection

解决方案其实很简单,使用css3 ::selection属性,该属性用于匹配元素中被用户选中或处于高亮状态的部分,并且支持修改匹配元素的color, background, cursor,和outline属性。

我在博客设置添加了如下代码:

::selection {
color: #fff;
background: #088;
}

那么现在博客文本选中就是这个样子了:

 叁 ❀ 兼容

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

一片绿色,IE9之后完全支持,需要注意的是,火狐61之前得添加-moz-前缀,这个操作可以交给前端构建工具去做。

::-moz-selection{}

那么就记录到这里了。

CSS修改选中文本颜色与背景色的更多相关文章

  1. win32 修改Edit控件文本颜色与背景色

    #define WM_CTLCOLORMSGBOX 0x0132 #define WM_CTLCOLOREDIT 0x0133 //编辑控件Edit #define WM_CTLCOLORLISTBO ...

  2. 前端开发css禁止选中文本

    在我们日常的Java web前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...

  3. css 修改placeholder字体颜色字体大小 修改input记住账号密码后的默认背景色

     壹 ❀ 引 本来这个阶段的项目页面都是给实习生妹子做的,我只用写写功能接接数据,但这两天妹子要忙翻译,这个工作阶段也快结束了导致有点慌,只能自己把剩余的几个小页面给写了. 那么做页面的过程中,UI也 ...

  4. css 禁止选中文本

    css 如何禁止选中文字 .noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* ...

  5. css 修改placeholder的颜色

    input::-webkit-input-placeholder { color: #ff0000; } input::-moz-input-placeholder { color: #ff0000; ...

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

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

  7. pycharm修改选中字体颜色

    File->Setting->Editor->Color Scheme->General Scheme:Monokai 在方框内: Editor->Section Bac ...

  8. 【css3】如何自定义 placeholder 文本颜色

    昨天写了一篇基于 jquery 实现 ie 浏览器兼容 placeholder 效果,具体内容点击传送门.不过还是有点小瑕疵,就是不能设置 placeholder 文本颜色.本文主要介绍利用 css ...

  9. QTextEdit中选中文本修改字体与颜色,全部文本修改字体与颜色(设置调色板的前景色、背景色、文字颜色以及基色)

    ----我的生活,我的点点滴滴!! 当然以下内容都可以通过设置样式来达到目的,但是下面不使用这样的方法 先来看张图,理解此图基本就能实现上面所要达到的目的了 Widget::Widget(QWidge ...

随机推荐

  1. mybatis报错: java.lang.IllegalArgumentException invalid comparison: java.util.Date and java.lang.String

    原因是在使用<if> 进行条件判断时, 将datetime类型的字段与 ' ' 进行了判断,导致的错误 解决, 只使用  <if test="createTime != n ...

  2. Django回顾--配置文件

    """ Django settings for meiduo_mall project. Generated by 'django-admin startproject' ...

  3. javascript 代替jqueryeach写法

    javascript 代替jqueryeach写法 // 通过字面量方式实现的函数each var each = function(object, callback){ var type = (fun ...

  4. HTML中跨域请求天气粗略效果

    HTML中跨域请求天气粗略效果 html+css部分: <style> table{ border:1px red solid; border-collapse: collapse; ma ...

  5. python的pstuil模块总结

    import psutil print(dir(psutil)) # 查看逻辑cpu的个数 print(psutil.cpu_count()) # 查看物理cpu的个数 print(psutil.cp ...

  6. CPU异常分析(以trap00为例)

    Windows内核分析索引目录:https://www.cnblogs.com/onetrainee/p/11675224.html CPU异常的记录(trap00为例) 一.CPU检测到除零异常的执 ...

  7. 【xmind】 使用 Java 生成思维导图

    前言 在日常的工作与学习中,我们经常会使用思维导图这个工具,来把抽象而又无形的思考转换成有形并且具体的图像,是理清思路,梳理逻辑的一大神器. 准确的说,思维导图并不是一个具体的工具,而是一种方法.是道 ...

  8. VS2019 .Net Core 3.0 Web 项目启用动态编译

    VS2019 中 .Net Core 3.0 项目默认没有启用动态编译, 这导致按F5调试的时候,修改了 HTML 代码,在浏览器上刷新没有效果. 启用动态编译方法如下: 1. 安装 Microsof ...

  9. windows平台多网卡设置路由

    添加路由命令: route add 192.168.4.0 mask 255.255.255.0 192.168.4.1 metric 20 if 11 -p 其中192.168.4.0 是网络目标, ...

  10. SSM框架之Spring(4)AOP

    Spring(4)AOP 1.AOP概述 在软件业,AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种 ...