CSS自訂設定元素閃爍遊標顏色

這次帶給大家CSS自訂設定元素閃爍遊標顏色，CSS自訂設定元素閃爍遊標顏色的注意事項有哪些，以下就是實戰案例，一起來看一下。

前言

因為業務需求, 要求我們的input框內的文字與懸浮的遊標顏色不同, 這樣的問題肯定在書本上很難找到解決辦法， 需要通過平時的基礎累積和經驗。

解決方案

• 使用:<a href="http://www.php.cn/wiki/971.html" target="_blank">:first-line</a> 偽元素

• 使用<a href="http://www.php.cn/wiki/861.html" target="_blank">text-shadow</a> 和text-fill-color

• 使用caret-color

::fist-line 修改元素

##::fist-line 修改元素##: 一般來說，設定input框的color屬性會修改文字內容的顏色，同時順帶改變遊標的顏色。而::first-line

也可以設定首行文字內容的顏色, 利用選擇器的權重比，

::first-line覆蓋了前者的color

,最終得到了想要的結果。

input.form-control {
    color: #05d380; /* 光标颜色 */
}
input.form-control::first-line {
    color: #333; /* 文本颜色 */
}

缺陷: 只適用於input框, 同時微信 webview 不支援。需要寫兩個選擇器。 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;
}

缺陷: 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; /* 光标颜色 */
    }
}

小結

最近的需求裡，行動端開發越來越多，而裝置相容性一直都是頭痛的事情，如何更好的方式調試，寫出相容性更強的代碼。需要的就是不斷總結，減少錯誤重複發生。

最後能給大家帶來幫助就好，希望大家多點贊，收藏!!

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：

怎麼處理MySQL資料庫拒絕存取

######linux後台執行node服務指令步驟方法### ######

以上是CSS自訂設定元素閃爍遊標顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章！