資訊專欄INFORMATION COLUMN
摘要：解決方案使用偽元素使用和使用修改元素原理一般來說，設置框的屬性會修改文本內容的顏色，同時順帶改變光標的顏色。和原理先利用設置文本和光標的顏色然后利用設置文本陰影覆蓋文本顏色最后使用將文本顏色置為透明。
前言
因為業務需求, 要求我們的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
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113355.html
摘要：解決方案使用偽元素使用和使用修改元素原理一般來說，設置框的屬性會修改文本內容的顏色，同時順帶改變光標的顏色。和原理先利用設置文本和光標的顏色然后利用設置文本陰影覆蓋文本顏色最后使用將文本顏色置為透明。 前言 因為業務需求, 要求我們的input框內的文本與懸浮的光標顏色不同, 這樣的問題肯定在書本上很難找到解決辦法， 需要通過平時的基礎積累和經驗。 解決方案 使用 ::first-l...
摘要：實現不換行自動換行強制換行不換行自動換行強制換行常用的選擇器以下代碼是選擇父類下第一個子節點，元素，建議學習這個樣式屬性的使用，很實用的。不允許負值用百分比指定起止色位置。::-Webkit-Input-Placeholder input 的 H5?placeholder?屬性，很好用，但不能直接改這個文字顏色，所以目前的解決方法就是用::input-placeholder屬性來改。 配合 ...
摘要：效果如下配置方法參考下的配置方法完美支持提供了比默認更好的語法高亮，而且他完美支持。語法高亮默認安裝的對的支持讓人抓狂，幀動畫別開玩笑了你只會看到一片白色的純文本一樣的代碼。事實上不光，我建議用完全替代原來的來完成語法高亮。 文章轉載自本人的博客《三省吾身丶丶》點擊查看喜歡的話請瘋狂的推薦吧！ ^_^ 本文章會在本人有插件或者設置更新時，進行不定時更新 偷懶了，圖片地址直接設置的博客...
閱讀 2945·2021-11-22 15:25
閱讀 2240·2021-11-18 10:07
閱讀 1045·2019-08-29 15:29
閱讀 472·2019-08-29 13:25
閱讀 1503·2019-08-29 12:58
閱讀 3200·2019-08-29 12:55
閱讀 2911·2019-08-29 12:28
閱讀 500·2019-08-29 12:16
