纯css改变输入框光标颜色

我就记得在不久前, 旭神写了一篇文章, CSS改变插入光标颜色caret-color简介及其它变色方法, 当时还发现旭神的demo页面一个BUG. 后来发现评论区有人说使用text-shadow也可以实现, 然后在逛大漠大大的博客时又偶然发现如何改变表单控件光标颜色, 说的就是利用 text-shadow 来实现的, 本着实践的精神, 自己又把这两位大神的代码敲了一遍, 发现一个更简洁写法(窃喜).

首先跟着旭神的思路

先利用css3的新属性: caret-color

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

这样, 在支持 caret-color 属性的现代浏览器下变现都ok, 但是, 现代浏览器 Safari 却并不支持这一属性, 因此, 为了兼容 Safari 浏览器, 旭神又给出了以下代码:

input {
    color: red;
}
input::first-line {
    color: #333;
}

兼容 Safari 了, 但是火狐又出来调皮了, 怎么办呢, 综合一下两者, 有下面代码, 并且照顾到IE

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

但是一开始大家就会注意到, 那就是 first-line, 因此对于多行文本元素 textarea 是不友好的.

下面, 来看看大漠大大的思路

不过大漠是倒着来的, 先说的以前的模拟的方法, 后介绍css3新属性 caret-color, 至于新属性的方法使用好简单, 这里就不赘述, 来说说大漠使用的 text-shadow 方法吧.

input,textarea { 
    color: rgb(60, 0, 248); /* 光标的颜色*/ 
    text-shadow: 0px 0px 0px #D60B0B; /* 文本颜色 */ 
    -webkit-text-fill-color: transparent; 
}

其实原理都是一样的, 既然光标颜色和 color 颜色一致, 就设置 color 为想要的光标的颜色, 然后再利用css把文字的颜色改掉.

显然, text-shadow 可以完整地把文字内容复刻下来, 然后再利用 -webkit-text-fill-color 属性, 把文字原本的颜色变透明, 这样就显露出来了 text-shadow, 其实相比 first-line 来讲, 兼容性又更好了.

重点来了, 看我变身!

对于不是很清楚的东西, 还是有必要查一下来加深理解和扩展知识面的.

当我查询 -webkit-text-fill-color 属性的时候, 发现这货的作用竟然是: 检索或设置对象中的文字填充颜色. 我擦擦, 现成的属性不用, 非要绕路去使用 text-shadow(我确实不理解为什么). 两行代码解决问题:

.input5 {
    color: red;
    -webkit-text-fill-color: #333;
}

然后, IE打上hack

.input5 {
    color: red;
    color\0: #333;
    -webkit-text-fill-color: #333;
}

完美! 就是这个感觉.

补充: 貌似 safari 已经原生支持 caret-color 了, 恩...以上仅做参考.