如何用CSS原生属性caret-color改变input输入框光标颜色

目录
文章目录隐藏
  1. 1.使用 color 来实现

表单对大家来说并不陌生,当然,我也不是来和大家聊怎么做表单或者处理表单的样式网格,因为这些对于大家来说都是小儿科的东西。而是来聊聊怎么改变表单控件中光标的颜色。日常开发中我们可能会有改变 input 光标颜色的需求,在谷歌浏览器的默认光标颜色是黑色的,而表单控件的光标颜色是根据 color 属性来控制的。那么如果需要用 CSS 来改变表单控件,比如说 input 或者 textarea 元素的光标颜色,那么这个用 CSS 怎么改变呢? 先来看一下效果图:
如何用 CSS 原生属性 caret-color 改变 input 输入框光标颜色
这种效果有两种实现方式:

1.使用 color 来实现

光标的颜色是继承自当前输入框字体的颜色,所以用 color 属性即可改变:

input{
    color:red;
}

效果如下:
如何用 CSS 原生属性 caret-color 改变 input 输入框光标颜色

CSS 改变输入框光标颜色的原生属性 caret-color

caret-color 属性用来定义插入光标(caret)的颜色,这里说的插入光标,就是那个在网页的可编辑器区域内,用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。

上面说的“插入光标”(insertion caret)只是光标(caret)的其中一种。比如一些浏览器有一种光标叫做“导航光标“(navigation caret),它可以在不可编辑区域内来回移动。此外,当鼠标指针移动到一段 cursor 属性是 auto 的文本上方时,或移动到 cursor 属性是 text、 vertical-text 的內容上方時,虽然看起来有点像插入光标,但它不是插入光标(caret),而是鼠标指针光标(cursor)。

上一种方式已经修改了光标的颜色但是字体的颜色也改变了,如果只想改变光标的颜色而不改变字体的颜色那就使用 caret-color 属性:

input{
    caret-color:red;
}

效果如下:
如何用 CSS 原生属性 caret-color 改变 input 输入框光标颜色
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>

效果如下图:
如何用 CSS 原生属性 caret-color 改变 input 输入框光标颜色

兼容性

caret-color 属性目前 Chrome 和 Firefox 基本上可以放心使用,但是 Safari 以及 IE 浏览器则还需要等待一些时日。
具体兼容性数据见下截图:
如何用 CSS 原生属性 caret-color 改变 input 输入框光标颜色
下面问题来了,对于这些不兼容的浏览器,有没有什么其他办法可以让他们也能实现插入状态光标的变色效果呢?

其他方法改变输入框的闪烁的光标颜色

对于 IE 浏览器,其光标颜色看上去是永远固定的黑色,并不跟随输入框的颜色 color 变化,因此对于 IE 浏览器,是没有什么好方法的。

但是,对于 Safari 浏览器,由于输入框控件的闪烁光标颜色是和设置的 color 属性颜色一致,因此我们是有手段可以对光标进行控制的。

具体实现代码如下:

input {
  color: red;
}
input::first-line {
  color: #333;
}

Safari 浏览器下截图效果如下:
如何用 CSS 原生属性 caret-color 改变 input 输入框光标颜色
借助::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 截图):
如何用 CSS 原生属性 caret-color 改变 input 输入框光标颜色

结束语

但是在 IE 浏览器中输入光标的颜色自定义,怕是要借助 JS 才能实现,而且还不好实现,如何实时知道光标位置在哪里,什么时候消失什么时候没有是个很难实现的问题。最好的解决方法就是忽略 IE 浏览器

「点点赞赏,手留余香」

8

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 如何用CSS原生属性caret-color改变input输入框光标颜色

1 评论

  1. 嗯,学到了,正好用到,谢谢

发表回复