【CSS3】自定義設置可編輯元素閃爍光標的顏色

前言

由於業務需求, 要求咱們的input框內的文本與懸浮的光標顏色不一樣, 這樣的問題確定在書本上很難找到解決辦法， 須要經過平時的基礎積累和經驗。

解決方案

• 使用 ::first-line 僞元素
• 使用 text-shadow 和 text-fill-color
• 使用 caret-color

::fist-line 修改元素

原理

通常來講，設置input框的 color 屬性會修改文本內容的顏色，同時順帶改變光標的顏色。而::first-line也能夠設置首行文本內容的顏色, 利用選擇器的權重比，::first-line覆蓋了前者的color,最終獲得了想要的結果。實際演示

input.form-control {
    color: #05d380; /* 光標顏色 */
}

input.form-control::first-line {
    color: #333; /* 文本顏色 */
}

缺陷

只適用於input框, 同時微信 webview 不支持。須要寫兩個css樣式。

text-shadow 和 text-fill-color

原理

先利用color設置文本和光標的顏色, 而後利用 text-shadow 設置文本陰影覆蓋文本顏色, 最後使用text-fill-color 將文本顏色置爲透明。實際演示

.form-control {
    color: #05d380; /* 光標顏色 */
    text-shadow: 0 0 0 #333; /* 文本顏色 */
    -webkit-text-fill-color: transparent;
}

/* 設置暗文顏色 */
.form-control::-webkit-input-placeholder{ 
    color: rgb(60, 0, 248); /* 改變placeholder文本顏色 */ 
    text-shadow: none; 
    -webkit-text-fill-color: initial;
}

缺陷

text-fill-color 屬性不太支持 firefox, 目前儘可能使用 -webkit- 前綴。

caret-color

原理

這是CSS3最新的屬性，目的就是爲了解決光標顏色的問題。 實際演示

.form-control {
    color: #333; /* 文本顏色 */
    caret-color: #05d380; /* 光標顏色 */
}

缺陷

低版本IE瀏覽器不支持

兼容性考慮

爲了兼容多端設備顯示狀況，咱們必需要將一些狀況考慮進來, 使用@support 條件判斷來檢測是否可用。由於個人環境在於移動端展現，因此只要要求進行兼容移動端，結合第二種和第三種解決方案，能夠大面積覆蓋設備。

.form-control {
    color: #05d380; /* 光標顏色 */
    text-shadow: 0 0 0 #333; /* 文本顏色 */
    -webkit-text-fill-color: transparent;
}

@supports (caret-color: #05d380) {
    .form-control {
        color: #333; /* 文本顏色 */
        caret-color: #05d380; /* 光標顏色 */
    }
}

小結

最近的需求裏，移動端開發愈來愈多，而設備兼容性一直都是頭疼的事情，如何更好的方式調試，寫出兼容性更強的代碼。須要的就是不斷總結，減小錯誤重複發生。

最後能給你們帶來幫助就好，但願你們多點贊，收藏 !!

周邊知識

• CSS改變插入光標顏色caret-color簡介
• W3cplus 介紹 caret-color
• 自定義 command line