CSS caret-color 光标颜色

caret-color属性设置文本输入光标颜色：caret-color:red（仅光标颜色不影响文本）、与color和background-color的对比（caret-color取color的auto值或不取transparent）、无障碍对比度考虑 · 难度：入门 · +10XP

CSS caret-color —— 输入光标的颜色控制

文本输入框里那个一闪一闪的光标（caret），默认颜色跟着文字颜色走。caret-color让你单独设置光标的颜色，让输入体验更精致。

基本用法

/* 绿色输入光标 */
input {
  caret-color: #4CAF50;
}
/* 品牌色光标 */
textarea:focus {
  caret-color: var(--brand-color);
}

特殊技巧：隐藏光标

.terminal {
  background: #000;
  color: #0f0;
  caret-color: transparent;  /* 光标透明，但仍然可以输入 */
}

注意：caret-color只影响光标的颜色，不影响文字颜色或选中文本的颜色。

动手练习

1. 基础练习：给一个深色背景的输入框设置白色光标。
2. 进阶应用：做一组不同颜色的输入框——每个输入框的光标颜色都不一样。
3. 项目实战：在网站的暗黑模式下自动切换输入光标为浅色，亮色模式恢复深色光标。