我就记得在不久前, 旭神写了一篇文章, 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;}
完美! 就是这个感觉.
最后附上原文链接纯css改变输入框光标颜色, 欢迎交流.
更多专业前端知识,请上 【猿2048】