CSS改變輸入框光標(biāo)顏色的原生屬性caret-color怎么用
這篇文章主要介紹了CSS改變輸入框光標(biāo)顏色的原生屬性caret-color怎么用，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比云浮網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式云浮網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋云浮地區(qū)。費(fèi)用合理售后完善，10年實(shí)體公司更值得信賴。
一、CSS改變輸入框光標(biāo)顏色的原生屬性caret-color
CSS caret-color屬性可以改變輸入框插入光標(biāo)的顏色，同時(shí)又不改變輸入框里面的內(nèi)容的顏色。
例如：
input {
color: #333;
caret-color: red;
}結(jié)果光標(biāo)顏色變成紅色，文字還是深黑色：
眼見為實(shí)，您可以狠狠的點(diǎn)擊這里：CSS caret-color改變光標(biāo)顏色demo
//zxx: 單詞caret表示“插入符號(hào)”，指處于內(nèi)容可插入狀態(tài)的光標(biāo)。
caret-color屬性不僅對(duì)于原生的輸入表單控件有效，設(shè)置contenteditable的普通HTML標(biāo)簽也適用。
例如：
[contenteditable="true"] {
width: 120px;
border: 1px solid #ddd;
padding: 3px;
line-height: 20px;
color: #333;
caret-color: red;
}文字
效果如下圖：
兼容性
caret-color屬性目前Chrome和Firefox基本上可以放心使用，但是Safari以及IE瀏覽器則還需要等待一些時(shí)日。
具體兼容性數(shù)據(jù)見下截圖：
下面問(wèn)題來(lái)了，對(duì)于這些不兼容的瀏覽器，有沒有什么其他辦法可以讓他們也能實(shí)現(xiàn)插入狀態(tài)光標(biāo)的變色效果呢？
二、其他方法改變輸入框的閃爍的光標(biāo)顏色
對(duì)于IE瀏覽器，其光標(biāo)顏色看上去是永遠(yuǎn)固定的黑色，并不跟隨輸入框的顏色color變化，因此對(duì)于IE瀏覽器，是沒有什么好方法的。
但是，對(duì)于Safari瀏覽器，由于輸入框控件的閃爍光標(biāo)顏色是和設(shè)置的color屬性顏色一致，因此我們是有手段可以對(duì)光標(biāo)進(jìn)行控制的。
具體實(shí)現(xiàn)代碼如下：
input {
color: red;
}
input::first-line {
color: #333;
}于是效果即達(dá)成。
您可以狠狠地點(diǎn)擊這里：借助::first-line改變插入光標(biāo)顏色demo
Safari瀏覽器下截圖效果如下：
借助::first-line偽元素的方法在Chrome，Safari瀏覽器下表現(xiàn)良好，但是Firefox瀏覽器并不支持，其表現(xiàn)為::first-line，因此，整個(gè)輸入框文字都是紅色。
對(duì)于不支持::first-line方法的瀏覽器，相關(guān)CSS會(huì)污染正常的樣式表現(xiàn)，因此我們需要區(qū)分處理，例如可以這樣：
input, input::first-line {
color: #333;
}
@supports (-webkit-mask: none) {
input { color: red; }
}然而這種方法也有局限性，對(duì)于
重慶分公司
重慶分公司