前言由于业务需要，要求我们输入框的文字与浮动光标的颜色不同。这个问题一定很难在书上找到解决办法。需要通过平时的基本积累和经验。解决方案使用::first-line伪元素使用text-shadow和text-fill-color使用caret-color::fist-line修改元素原理一般来说，设置输入框的color属性会修改颜色的文字内容，同时顺便改变一下光标的颜色。而::first-line还可以设置第一行文本内容的颜色。利用选择器的权重比例，::first-line覆盖前者的颜色，最终得到想要的结果。实际演示input.form-control{color:#05d380;/*光标颜色*/}input.form-control::first-line{color:#333;/*文字颜色*/}缺陷只适用于输入框，同时微信webview不支持。需要写两个css样式。text-shadow和text-fill-color的原理首先使用color设置文字和光标的颜色，然后使用text-shadow设置文字阴影覆盖文字颜色，最后使用text-fill-color将文本颜色设置为透明。实际demo.form-control{color:#05d380;/*光标颜色*/text-shadow:000#333;/*文本颜色*/-webkit-text-fill-color:transparent;}/*设置深色文本颜色*/.form-control::-webkit-input-placeholder{color:rgb(60,0,248);/*更改占位符文本颜色*/text-shadow:none;-webkit-text-fill-color:initial;}缺陷text-fill-color属性不支持firefox，目前尽量使用-webkit-前缀。caret-color的原理这是CSS3的最新属性，目的是解决光标颜色问题。实际demo.form-control{color:#333;/*文本颜色*/caret-color:#05d380;/*光标颜色*/}缺陷低版本IE浏览器不支持兼容性考虑为了兼容多终端设备的显示，我们不得不考虑一些情况，使用@support条件判断来检测是否可用。因为我的环境是在移动端展示，只要要求兼容移动端，结合第二种方案和第三种方案就可以覆盖大面积的设备。.form-control{颜色：#05d380;/*光标颜色*/text-shadow:000#333;/*文本颜色*/-webkit-text-fill-color:transparent;}@supports(caret-color:#05d380){.form-control{color:#333;/*文本颜色*/caret-color:#05d380;/*Cursorcolor*/}}Summary在最近的需求中，移动端开发越来越多，而设备兼容性一直是个头疼的问题，如何更好的调试，写出更兼容的代码。需要的是不断总结，减少错误的重复。最后，能帮到大家就好了。希望大家喜欢并收藏！！周边知识CSS更改插入光标颜色caret-color介绍W3cplus介绍caret-color自定义命令行介绍
