css修改input输入框中的光标颜色——技能提升

太过爱你忘了你带给我的痛 2022-09-04 11:40 296阅读 0赞

今天在看后台系统时，发现系统首页变成了下面的样式。输入框背景颜色改为了白色  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
一般输入框中的光标默认颜色也是白色，这就导致输入框无法确定光标的位置，因为颜色一致。

此时可以修改一下光标的颜色。

大神修改光标颜色的办法：[大神修改光标颜色：https://blog.csdn.net/qiphon3650/article/details/90440715][https_blog.csdn.net_qiphon3650_article_details_90440715]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
从上面的图片可以看出，直接修改光标颜色的方法就是：`caret-color: red`  
效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]  
问题解决！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20220829/3b82d07309164fd493d5027116b1da94.png
[https_blog.csdn.net_qiphon3650_article_details_90440715]: https://blog.csdn.net/qiphon3650/article/details/90440715
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20220829/855643545cf7489a894700aa2d343bf4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20220829/d76193e52b3f4552bc18b4c9dd84764d.png