改变 input 焦点光标的颜色

需求

设计师觉得默认的光标颜色有点与整体设计风格不符合,有点突兀,想换成红色的

代码

<input value="This field uses a default caret." />
<input class="custom" value="I have a custom caret color!" />
input {
  caret-color: auto;
  display: block;
  margin-bottom: .5em;
}

input.custom {
  caret-color: red;
}

最终效果

改变 input 焦点光标的颜色


相关文章: