输入光标颜色答案

【问题标题】：Input cursor color输入光标颜色
【发布时间】：2011-02-14 07:37:44
【问题描述】：

如何在输入一些值时更改 HTML 输入类型文本中内容的颜色。还有焦点时的光标颜色。

【问题讨论】：

【解决方案1】：

使用color 指定文本颜色。使用caret-color 指定插入符号的颜色。

HTML

<input class="examples" />
<textarea class="examples"></textarea>

CSS

.examples {
  color: gray;
  caret-color: red;
}

【讨论】：

这应该是现在的答案。我知道这个问题已经有好几年了，但这是你应该使用的。
目前在 2019 年 11 月下旬，大多数主流浏览器都支持 caret-color。您可以在caniuse.com/#feat=css-caret-color 找到完整的统计数据。目前，Firefox、Chrome、Safari、Opera、iOS Safari、Android 浏览器、Opera Mobile、Android 版 Chrome、Android 版 Firefox、Android 版 UC 浏览器和三星互联网都支持它。这应该是这个问题的正确答案。

【解决方案2】：

使用现代 CSS！

input {
    caret-color : red;
}
input:focus {
    color : yellow;
}

【讨论】：

【解决方案3】：

输入内容时更改颜色很容易：

input:focus { color: yellow }

IE7 及更低版本不支持。兼容表here。

据我所知，专门更改光标颜色是不可能的。它通常采用文本内容的颜色，在大多数情况下应该没问题。

【讨论】：