CSS改变插入光标颜色caret-color简介及其它变色方法(转)
一、CSS改变输入框光标颜色的原生属性caret-color
CSS caret-color
属性可以改变输入框插入光标的颜色,同时又不改变输入框里面的内容的颜色。
例如:
input {
color: #333;
caret-color: red;
}
结果光标颜色变成红色,文字还是深黑色:
眼见为实,您可以狠狠的点击这里:CSS caret-color改变光标颜色demo
//zxx: 单词caret表示“插入符号”,指处于内容可插入状态的光标。
caret-color
属性不仅对于原生的输入表单控件有效,设置contenteditable
的普通HTML标签也适用。
例如:
[contenteditable="true"] {
width: 120px;
border: 1px solid #ddd;
padding: 3px;
line-height: 20px;
color: #333;
caret-color: red;
}
<div contenteditable="true">文字</div>
效果如下图:
兼容性
caret-color
属性目前Chrome和Firefox基本上可以放心使用,但是Safari以及IE浏览器则还需要等待一些时日。
具体兼容性数据见下截图:
下面问题来了,对于这些不兼容的浏览器,有没有什么其他办法可以让他们也能实现插入状态光标的变色效果呢?
二、其他方法改变输入框的闪烁的光标颜色
对于IE浏览器,其光标颜色看上去是永远固定的黑色,并不跟随输入框的颜色color
变化,因此对于IE浏览器,是没有什么好方法的。
但是,对于Safari浏览器,由于输入框控件的闪烁光标颜色是和设置的color
属性颜色一致,因此我们是有手段可以对光标进行控制的。
具体实现代码如下:
input {
color: red;
}
input::first-line {
color: #333;
}
于是效果即达成。
您可以狠狠地点击这里:借助::first-line改变插入光标颜色demo
Safari浏览器下截图效果如下:
借助::first-line
伪元素的方法在Chrome,Safari浏览器下表现良好,但是Firefox浏览器并不支持,其表现为<input>
输入框里面的内容不属于::first-line
,因此,整个输入框文字都是红色。
对于不支持::first-line
方法的浏览器,相关CSS会污染正常的样式表现,因此我们需要区分处理,例如可以这样:
input, input::first-line {
color: #333;
}
@supports (-webkit-mask: none) {
input { color: red; }
}
然而这种方法也有局限性,对于<textarea>
这种多行输入控件就无能为力,因为::first-line
只能控制首行元素颜色。
三、两种实现方法综合
综合上面两种方法,可以得到最佳实践如下:
如果浏览器支持caret-color
属性,优先使用caret-color
(Chrome/Firefox/Opera);其次使用::first-line
方法(Safari);最后忽略(如IE)。
整合后CSS如下:
input {
color: #333;
caret-color: red;
}
@supports (-webkit-mask: none) and (not (cater-color: red)) {
input { color: red; }
input::first-line { color: #333; }
}
效果如下截图(Firefox截图):
您可以狠狠的点击这里:caret-color加first-line改变输入光标颜色demo
rem
布局不再使用 JavaScript
设置
这里不探讨 rem
的原理以及细节,还不熟悉的童鞋建议去恶补一下。
需求
有时候,移动端用
rem
布局时候,根据不同的屏幕宽度要设置不同的font-size
来做到适配,要写一坨JS
来设置,能不能不用JS呢?
例如:以 750px
设计稿作为基准,根节点设置 font-size
为 100px
,只考虑 DPR
为 2
的情况,只考虑最简单的情况
document.querySelector('html').style.fontSize = `${window.innerWidth / 7.5 }px`;
代码
现在移动端 css3
单位 vw
,wh
兼容性已经很不错了,在不需要兼容太低版本的安卓机情况下可以这样来:
html{
font-size: 100vw / 7.5
}
CSS改变插入光标颜色caret-color简介及其它变色方法(转)的更多相关文章
- CSS改变插入光标颜色caret-color
CSS代码: input { color: #333; caret-color: red; } @supports (-webkit-mask: none) and (not (caret-color ...
- css改变svg的颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS 改变文本选中颜色
改变文字颜色 ::selection { background: #f88; text-shadow: none; color: #000;}::-moz-selection { ...
- 改变input光标颜色与输入字体颜色不同
设置input css: color #ffd600text-shadow 0px 0px 0px #bababa -webkit-text-fill-color initial input, tex ...
- CSS改变png图片颜色
来源地址:http://www.zhangxinxu.com/wordpress/?p=5429 张鑫旭大神的个人网站上看到的,纯属分享和记录 css div.icon{height:20px;wid ...
- css 改变图片灰度颜色
我一直喜欢灰度图像因为我认为他们看起来更有艺术感.很多图片编辑如Photoshop很容易把你的彩色图像变成灰度.甚至有选择调整颜色深度和色调.不幸的是,这样的效果想做在网络上并不容易,因为浏览器有差异 ...
- css改变图片的颜色
参考大神张鑫旭:http://www.zhangxinxu.com/wordpress/2016/06/png-icon-change-color-by-css/ 主要知识点:border-right ...
- CSS改变placeholder的颜色
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #a1a1a1; } ::-moz-placeholder { /* Mozilla ...
- css只改变input输入框光标颜色不改变文字颜色实现方法
input:focus{color:blue}//光标颜色 input{ text-shadow: 0px 0px 0px red;//文字颜色 -webkit-text-fill-color: tr ...
随机推荐
- Cisco配置VLAN+DHCP中继代理+NAT转发上网
实验环境: 路由器 使得TP-link 设置NAT转发使用,tp-link路由器网关设置成 192.168.30.254 (核心层)Cisco 3550三层交换机(型号C3550-I5Q3L2-M)配 ...
- c# 单实例运行
/// <summary> /// 单实例运行程序 /// </summary> static void SingleInstanceRun() { bool isAppRun ...
- Python MySQL(MySQLdb)
From: http://www.yiibai.com/python/python_mysql.html Python标准的数据库接口的Python DB-API(包括Python操作MySQL).大 ...
- Java基础--深克隆补充
深克隆文章很多,这里推荐Java提高篇--对象克隆(复制). 以上文章条理清晰,一目了然,但最近在项目中碰到的实际问题是,所要克隆的对象是加上子类父类共计207个,无论用上述两种方式的哪一种,都要一一 ...
- VCL 中的 Windows API 函数(5): AlphaBlend
AlphaBlend 是指定图像混合透明的函数, 在 Graphics.GraphUtil.RibbonStyleActnCtrls 单元用到. 下面的测试是把一张图片显示在窗体, 并可以调整透明度. ...
- Apache伪静态配置,支持.htaccess配置方法
第一.编辑httpd.conf文件 A - 在etc/httpd/conf/目录下的httpd.conf 文件,找到: LoadModule rewrite_module modules/mod_re ...
- win7 、2008 提示Error 1606 Could Not Access Network Location %SystemDrive%/inetpub/wwwroot/ 的错误解决方法
在安装控件过程中出现提示Error 1606 Could Not Access Network Location %SystemDrive%/inetpub/wwwroot/ 的错误解决方法 1. 点 ...
- NHibernate 集合映射深入 (第五篇) <set>,<list>,<map>,<bag>
一.集合外键 在NHibernate中,典型的用于映射集合类的元素有<set>,<list>,<map>,<bag>,<array>,< ...
- 九度 1557:和谐答案 (LIS 变形)
题目描述: 在初试即将开始的最后一段日子里,laxtc重点练习了英语阅读的第二部分,他发现了一个有意思的情况.这部分的试题最终的答案总是如下形式的:1.A;2.C;3.D;4.E;5.F.即共有六个空 ...
- Hightchart 技巧
http://blog.csdn.net/u014796515/article/details/24428131