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

苏南大叔:css样式,如何修改input输入框的光标颜色? - css-caret-color
css样式,如何修改input输入框的光标颜色?(图3-1)

本文测试环境:chrome@78.0.3904.108

方案一(不完美)

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

input{
    color:red;
}

苏南大叔:css样式,如何修改input输入框的光标颜色? - css-input-color
css样式,如何修改input输入框的光标颜色?(图3-2)

方案二(完美)

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

input{
    caret-color:red;
}

苏南大叔:css样式,如何修改input输入框的光标颜色? - css-input-caret-color
css样式,如何修改input输入框的光标颜色?(图3-3)

相关链接

总结

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

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

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   css

本站的忠实读者小伙伴,正在阅读下面这些文章: