咨询热线 ：
028-86922220
×
01
关于我们

公司简介

发展历程

02
服务项目

高端网站建设

微信开发

APP开发

网络营销服务

电商网站定制

生物医药网站建设

外贸网站建设

教育培训网站建设

03
小程序开发

小程序开发

功能应用

客户案例

04
案例展示

网站建设案例

小程序案例

电商平台案例

APP案例

系统平台案例

05
建站动态

网站建设

网站设计

网站营销

小程序

06
联系我们

公司地址

人才招聘

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

大橙子网站建设，新征程启航

为企业提供网站建设、域名注册、服务器等服务

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

这篇文章主要介绍了CSS改变输入框光标颜色的原生属性caret-color怎么用，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联-专业网站定制、快速模板网站建设、高性价比云浮网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式云浮网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖云浮地区。费用合理售后完善，10年实体公司更值得信赖。

一、CSS改变输入框光标颜色的原生属性caret-color

CSS caret-color属性可以改变输入框插入光标的颜色，同时又不改变输入框里面的内容的颜色。

例如：

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

结果光标颜色变成红色，文字还是深黑色：

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

眼见为实，您可以狠狠的点击这里：CSS caret-color改变光标颜色demo

//zxx: 单词caret表示“插入符号”，指处于内容可插入状态的光标。

caret-color属性不仅对于原生的输入表单控件有效，设置contenteditable的普通HTML标签也适用。

例如：

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

效果如下图：

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

兼容性

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

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

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

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

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

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

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

具体实现代码如下：

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

于是效果即达成。

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

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

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

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

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

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

然而这种方法也有局限性，对于