&nbs p;
一、 CSS 改变 输入框 光标 颜色的原生属性caret-color
CSS caret-color 属性可以改变输入框插入光标的颜色，同时又不改变输入框里面的内容的颜色。
例如：
input { color: # 333; caret-color: red ; } 结果光标颜色变成 红色 ，文字还是深黑色：
眼见为实，您可以狠狠的点击这里：CSS caret-color改变光标颜色demo
//zxx: 单词caret表示“插入符号”，指处于内容可插入状态的光标。
caret-color 属性不仅对于原生的输入表单控件有效，设置 contented IT able 的普通HT ML 标签也适用。
例如：
[contenteditable="true"] { width: 120px; border: 1px solid #ddd; padding: 3px; line-h ei ght: 20px; color: #333; caret-color: red; } <div contenteditable="true">文字</div>
效果如下图：
兼容性
caret-color 属性目前Ch rom e和Firefox基本上可以放心使用，但是Safari以及IE浏览器则还需要等待一些时日。
具体兼容性数据见下截图：
下面问题来了，对于这些不兼容的浏览器，有没有什么其他办法可以让他们也能实现插入状态光标的变色效果呢？
二、其他方法改变输入框的闪烁的光标颜色
对于IE浏览器，其光标颜色看上去是 永远 固定的黑色，并不跟随输入框的颜色 color 变化，因此对于IE浏览器，是没有什么好方法的。
但是，对于Safari浏览器，由于输入框控件的闪烁光标颜色是和设置的 color 属性颜色一致，因此我们是有 手段 可以对光标进行控制的。
具体实现代码如下：
input { color: red; } input :: First -line { color: #333; } 于是效果即达成。
您可以狠狠地点击这里：借助::first-line改变插入光标颜色demo
Safari浏览器下截图效果如下：
借助 ::first-line 伪元素的方法在C hr ome，Safari浏览器下表现良好，但是Firefox浏览器并不支持，其表现为 <input> 输入框里面的内容不属于 ::first-line ，因此，整个输入框文字都是红色。
对于不支持 ::first-line 方法的浏览器，相关CSS会污染 正常 的样式表现，因此我们需要区分处理，例如可以这样：
input, input::first-line { color: #333; } @supports (- webkit -mask: none) { input { color: red; } } 然而这种方法也有局限性，对于 <textarea> 这种多行输入控件就无能为力，因为 ::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截图）：
您可以狠狠的点击这里：caret-color加first-line改变输入光标颜色demo
四、结束语
在我目前所掌握的前端技 术 认知中，IE浏览器下的输入光标的颜色自定义，怕是要借助JS才能实现，而且还不好实现，如何实时 知道 光标位置在哪里，什么时候 消失 什么时候没有是个很难实现的问题。例如移动端Safari浏览器下的原生的光标定位就会经常出现一些奇怪的问题，更不要提我们这种纯前端技术策略的实现了，一定会出现更多稀奇古怪的问题，投入产出比估计会很糟糕。所以更好的做法 应该 是忽略IE浏览器。
好，以上就是本文的全部内容，感谢阅读！
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-CSS改变插入光标颜色caret-color简介及其它变色方法 全部内容，希望文章能够帮你解决 html5教程-CSS改变插入光标颜色caret-color简介及其它变色方法 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-CSS改变插入光标颜色caret-color简介及其它变色方法的详细内容...