這次帶給大家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 修改元素##: 一般來說，設定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 屬性較不支援-webkit-前綴。 caret-color
原理: 這是CSS3最新的屬性，目的就是為了解決遊標顏色的問題。
.form-control {
color: #333; /* 文本颜色 */
caret-color: #05d380; /* 光标颜色 */
}IE瀏覽器不支援相容性考慮
條件判斷
來偵測是否可用。因為我的環境在於行動端展示，所以只要要求進行相容行動端，結合第二種和第三種解決方案，可以大面積覆蓋設備。.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中文網其它相關文章！
推薦閱讀：
以上是CSS自訂設定元素閃爍遊標顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章！
