CSS改变插入光标颜色caret-color简介及其它变色方法

2018-01-29 13:12:48来源:http://www.zhangxinxu.com/wordpress/2018/01/css-caret-color-作者:张鑫旭人点击

分享

这篇文章发布于 2018年01月28日,星期日,17:17,归类于css相关。 阅读 22 次, 今日 22 次


byzhangxinxu from http://www.zhangxinxu.com/wordpress/?p=7336


本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处,摘要引流则随意。


一、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


四、结束语

在我目前所掌握的前端技术认知中,IE浏览器下的输入光标的颜色自定义,怕是要借助JS才能实现,而且还不好实现,如何实时知道光标位置在哪里,什么时候消失什么时候没有是个很难实现的问题。例如移动端Safari浏览器下的原生的光标定位就会经常出现一些奇怪的问题,更不要提我们这种纯前端技术策略的实现了,一定会出现更多稀奇古怪的问题,投入产出比估计会很糟糕。所以更好的做法应该是忽略IE浏览器。


好,以上就是本文的全部内容,感谢阅读!



本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。


本文地址: http://www.zhangxinxu.com/wordpress/?p=7336


(本篇完)


最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台