CSS改变输入框光标颜色的原生属性caret-color怎么用

input {
    color: #333;
    caret-color: red;
}

[contenteditable="true"] {
    width: 120px;
    border: 1px solid #ddd;
    padding: 3px;
    line-height: 20px;
    color: #333;
    caret-color: red;
}

文字

效果如下图：

兼容性

caret-color属性目前Chrome和Firefox基本上可以放心使用，但是Safari以及IE浏览器则还需要等待一些时日。

具体兼容性数据见下截图：

下面问题来了，对于这些不兼容的浏览器，有没有什么其他办法可以让他们也能实现插入状态光标的变色效果呢？

二、其他方法改变输入框的闪烁的光标颜色

对于IE浏览器，其光标颜色看上去是永远固定的黑色，并不跟随输入框的颜色color变化，因此对于IE浏览器，是没有什么好方法的。

但是，对于Safari浏览器，由于输入框控件的闪烁光标颜色是和设置的color属性颜色一致，因此我们是有手段可以对光标进行控制的。

具体实现代码如下：

input {
  color: red;
}
input::first-line {
  color: #333;
}

于是效果即达成。

您可以狠狠地点击这里：借助::first-line改变插入光标颜色demo

Safari浏览器下截图效果如下：

借助::first-line伪元素的方法在Chrome，Safari浏览器下表现良好，但是Firefox浏览器并不支持，其表现为输入框里面的内容不属于::first-line，因此，整个输入框文字都是红色。

对于不支持::first-line方法的浏览器，相关CSS会污染正常的样式表现，因此我们需要区分处理，例如可以这样：

input, input::first-line {
    color: #333;
}
@supports (-webkit-mask: none) {
    input { color: red; }
}

然而这种方法也有局限性，对于</code>这种多行输入控件就无能为力，因为<code>::first-line</code>只能控制首行元素颜色。</p><h4>三、两种实现方法综合</h4><p>综合上面两种方法，可以得到最佳实践如下：</p><p>如果浏览器支持<code>caret-color</code>属性，优先使用<code>caret-color</code>（Chrome/Firefox/Opera）；其次使用<code>::first-line</code>方法（Safari）；最后忽略（如IE）。</p><p>整合后CSS如下：</p><pre>input {     color: #333;     caret-color: red; } @supports (-webkit-mask: none) and (not (cater-color: red)) {     input { color: red; }     input::first-line { color: #333; } }</pre><p>效果如下截图（Firefox截图）：</p><p><img src="/upload/otherpic68/40163.jpg" alt="CSS改变输入框光标颜色的原生属性caret-color怎么用"></p><p>感谢你能够认真阅读完这篇文章，希望小编分享的“CSS改变输入框光标颜色的原生属性caret-color怎么用”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!</p> <br> 当前标题：CSS改变输入框光标颜色的原生属性caret-color怎么用 <br> 转载来源：<a href="http://xiwangwangguoyuan.com/article/poseed.html">http://xiwangwangguoyuan.com/article/poseed.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/cjhgsj.html">phpcurl_init()报错怎么解决？</a> </li><li> <a href="/article/cjhgsc.html">【亳州网站建设】模板网站能否满足当前企业网站建设的需要？</a> </li><li> <a href="/article/cjhgco.html">域名知识：聊聊.net.cn域名优势有哪些</a> </li><li> <a href="/article/cjhgdc.html">互联网赢利秘籍：先高调后低调</a> </li><li> <a href="/article/cjhgdj.html">【池州网站建设】做网站之前企业应该考虑的问题</a> </li> </ul> </div> </div> <footer> <div class="message"> <div class="mess container"> <p>免费获取网站建设与品牌策划方案报价</p> <span>*主要业务范围包括：高端网站建设， 集团网站建设(网站建设网站制作)找网站建设公司就上云锦诚科技。</span> <form action=""> <input type="text" class="ipt1" placeholder="联系人"> <input type="text" class="ipt2" placeholder="联系电话"> <textarea name="" id="" placeholder="内容描述：描述您的需求，如网站、微信、电商、APP等。"> 提交需求