HTML中如何用caret-color自定义输入光标颜色

能，caret-color 是 CSS 原生属性，专用于设置 <input type="text">、<textarea>、contenteditable 等可编辑元素的光标颜色，不支持 type="number" 或 disabled 元素；需浏览器支持（Chrome 57+/Firefox 53+/Safari 11.1+）且元素处于可编辑状态。

caret-color 能直接改 input 和 textarea 的光标颜色吗

能，但仅限于文本输入类元素，且需满足基本前提：浏览器支持 + 元素处于可编辑状态。caret-color 是 CSS 原生属性，不是 JavaScript API，所以不涉及 DOM 操作或事件监听。它对 <input type="text">、<input type="password">、<textarea> 以及 contenteditable 元素生效，对 <input type="number"> 或禁用状态（disabled）的元素无效。

为什么设置了 caret-color 却没变化

常见原因有三个，按发生频率排序：

• caret-color 被更具体的样式覆盖，比如某个框架重置了 input 的所有继承属性，导致 caret-color 未继承；检查 computed styles 看是否被 override
• 父级设置了 color: transparent 或 color: rgba(0,0,0,0)，而 caret-color 默认继承 color，此时光标会“消失”——这不是 bug，是规范行为
• 浏览器不支持：IE 完全不支持；旧版 Safari（≤14.1）需加 -webkit- 前缀；Firefox 从 53+、Chrome 57+ 原生支持

如何安全地写兼容性写法

不用 polyfill，只靠 CSS 前缀和回退即可。现代项目可直接用原生值，但若需支持 Safari ≤14.1，加上前缀即可，无需 JS 检测：

input,textarea {  color: #333;  caret-color: #007bff;          /* 标准写法 */  -webkit-caret-color: #007bff; /* Safari ≤14.1 */}

注意：-webkit-caret-color 在新版 Chrome/Firefox 中会被忽略，无副作用；不需要用 @supports 包裹，简洁直接更可靠。

立即学习“前端免费学习笔记（深入）”；

caret-color 和 focus 状态怎么配合用

它本身不响应 focus，但你可以结合伪类动态控制。例如让光标在获得焦点时变蓝，失焦时恢复灰色：

input {  caret-color: #999;}input:focus {  caret-color: #007bff;}

这比监听 focus 事件再改 style 更轻量。但要注意：如果同时设置了 outline: none 又没提供其他视觉反馈，会损害可访问性；光标颜色变化不能替代 focus outline。

真正容易被忽略的是：当元素使用了 appearance: none 或自定义 border/shadow 时，光标位置可能因盒模型计算偏差而看起来“偏移”，这不是 caret-color 的问题，而是整体样式布局需要微调。