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

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

这种效果有两种实现方式：

1.使用color来实现

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

input{

color:red;

}

效果如下：

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;

}

效果如下：

caret-color属性不仅对于原生的输入表单控件有效，设置contenteditable的普通HTML标签也适用。

例如：

[contenteditable="true"] {

width: 120px;

border: 1px solid #ddd;

padding: 3px;

line-height: 20px;

color: #333;

caret-color: red;

}

文字

效果如下图：

兼容性

caret-color属性目前Chrome和Firefox基本上可以放心使用，但是Safari以及IE浏览器则还需要等待一些时日。

具体兼容性数据见下截图：

下面问题来了，对于这些不兼容的浏览器，有没有什么其他办法可以让他们也能实现插入状态光标的变色效果呢？

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

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

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

具体实现代码如下：

input {

color: red;

}

input::first-line {

color: #333;

}

Safari浏览器下截图效果如下：

借助::first-line伪元素的方法在Chrome，Safari浏览器下表现良好，但是Firefox浏览器并不支持，其表现为输入框里面的内容不属于::first-line，因此，整个输入框文字都是红色。

对于不支持::first-line方法的浏览器，相关CSS会污染正常的样式表现，因此我们需要区分处理，例如可以这样：

input, input::first-line {

color: #333;

}

@supports (-webkit-mask: none) {

input { color: red; }

}

然而这种方法也有局限性，对于这种多行输入控件就无能为力，因为::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截图)：

结束语

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