CSS Tips

改变输入框光标颜色

caret-color

caret-color 属性不仅对 input 和 textarea 有效，对设置了 contenteditable 属性的 HTML 标签也同样适用

Demo
1
2
3
4
5
6
input,
textarea,
[contenteditable] {
color: #333; /* 文本颜色 */
caret-color: #03a9f4; /* 光标颜色 */
}
模拟光标

caret-color 属性的兼容性不是很理想，对于不支持的浏览器，可以做兼容处理

color 指定光标颜色，然后通过 ::first-line 伪元素增加优先级设置文字颜色。这种写法也存在兼容问题

对 textarea 元素无效

win10 下 Edge 浏览器无效

Demo
1
2
3
4
5
6
7
8
9
10
input,
texxarea,
[contenteditable] {

color: #03a9f4;

&::first-line {
color: #333;
}
}

兼容性写法

input,
texxarea,
[contenteditable] {

  color: #03a9f4;

  &::first-line {
    color: #333;
  }
}

@supports (caret-color: #03a9f4) {
  input,
  textarea,
  [contenteditable] {
    color: #333; /* 文本颜色 */
    caret-color: #03a9f4; /* 光标颜色 */
  }
}