純css改變輸入框游標顏色

韓俠發表於2018-05-02
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改變輸入框游標顏色, 歡迎交流.

相關文章