純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;
}
複製代碼

完美! 就是這個感受.

最後附上原文連接純css改變輸入框光標顏色, 歡迎交流.