参考:张鑫旭技术博客–CSS改变插入光标颜色caret-color简介及其它变色方法
- 使用
caret-color
属性
input {
color: #333;
caret-color: red;
}
caret-color
属性不仅对于原生的输入表单控件有效,设置contenteditable的普通HTML标签也适用。
<div contenteditable="true">文字</div>
[contenteditable="true"] {
width: 120px;
border: 1px solid #ddd;
padding: 3px;
line-height: 20px;
color: #333;
caret-color: red;
}
caret-color存在兼容问题,部分浏览器并不支持,解决兼容问题最佳方案,
input {
color: #333;
caret-color: red;
}
@supports (-webkit-mask: none) and (not (cater-color: red)) {
input { color: red; }
input::first-line { color: #333; }
}
具体看张鑫旭的博客文章,这只是大致记一下