css样式，如何修改input输入框的光标颜色？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

苏南大叔在本文中，叙述一个非常罕见的需求的解决方案。就是：如何修改输入框里面的光标颜色。具体的来说的话，就是在网页上输入文字的时候，那个一闪一闪的竖线的颜色。这个需求很罕见，但是偶尔还是有客户会提出来的，而且这个需求确实可以实现。

本文测试环境：chrome@78.0.3904.108。

方案一（不完美）

可以通过设置input的字体颜色，来实现修改光标颜色的目的。因为：默认情况下，两者的颜色都遵守color定义。本方案并不是太完美，不过确实可以实现需求。缺点就是：修改了光标颜色的同时，也修改了input输入文字的颜色。

input{
    color:red;
}

方案二（完美）

本方案中，就仅仅修改光标caret的颜色，修改的属性是：caret-color，不涉及字体颜色color。

input{
    caret-color:red;
}

相关链接

• https://newsn.net/say/css-input-outline.html

总结

本文的知识点比较简单，但是就是比较罕见。总的一句话来说，要是想修改input输入框里面的光标的颜色的话，请修改css中的caret-color值即可。

更多css相关的文字，请点击苏南大叔的博客列表：

• https://newsn.net/tag/css/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。