关于旭神的学习记录(5） CSS3 : CSS改变插入光标颜色caret-color简介及其它变色方法

一、CSS改变输入框光标颜色的原生属性caret-color

input {
    color: #333;
    caret-color: skyblue
}

<input value="文字内容">

caret-color属性不仅对于原生的输入表单控件有效，设置contenteditable的普通HTML标签也适用。

例如：

[contenteditable="true"] {
    width: 120px;
    border: 1px solid #ddd;
    padding: 3px;
    line-height: 20px;
    color: #333;
    caret-color: red;
}

<div contenteditable="true">文字</div>

混合兼容:

CSS代码：

input {
    color: #333;
    caret-color: red;
}

/*如果浏览器支持caret-color属性，优先使用caret-color（Chrome/Firefox/Opera）；其次使用::first-line方法（Safari）；最后忽略（如IE）。*/

@supports (-webkit-mask: none) and (not (caret-color: red)) {
    input { color: red; }
    input::first-line { color: #333; }
}

HTML代码：

<input value="混合兼容处理">