CSS改變輸入框光標(biāo)顏色的原生屬性caret-color怎么用

這篇文章主要介紹了CSS改變輸入框光標(biāo)顏色的原生屬性caret-color怎么用，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

一、CSS改變輸入框光標(biāo)顏色的原生屬性caret-color

CSS caret-color屬性可以改變輸入框插入光標(biāo)的顏色，同時(shí)又不改變輸入框里面的內(nèi)容的顏色。

例如：

input {
    color: #333;
    caret-color: red;
}

結(jié)果光標(biāo)顏色變成紅色，文字還是深黑色：

眼見(jiàn)為實(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;
}

<div contenteditable="true">文字</div>

效果如下圖：

兼容性

caret-color屬性目前Chrome和Firefox基本上可以放心使用，但是Safari以及IE瀏覽器則還需要等待一些時(shí)日。

具體兼容性數(shù)據(jù)見(jiàn)下截圖：

下面問(wèn)題來(lái)了，對(duì)于這些不兼容的瀏覽器，有沒(méi)有什么其他辦法可以讓他們也能實(shí)現(xiàn)插入狀態(tài)光標(biāo)的變色效果呢？

二、其他方法改變輸入框的閃爍的光標(biāo)顏色

對(duì)于IE瀏覽器，其光標(biāo)顏色看上去是永遠(yuǎn)固定的黑色，并不跟隨輸入框的顏色color變化，因此對(duì)于IE瀏覽器，是沒(méi)有什么好方法的。

但是，對(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)為<input>輸入框里面的內(nèi)容不屬于::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ì)于<textarea>這種多行輸入控件就無(wú)能為力，因?yàn)?code>::first-line只能控制首行元素顏色。

三、兩種實(shí)現(xiàn)方法綜合

綜合上面兩種方法，可以得到最佳實(shí)踐如下：

如果瀏覽器支持caret-color屬性，優(yōu)先使用caret-color（Chrome/Firefox/Opera）；其次使用::first-line方法（Safari）；最后忽略（如IE）。

整合后CSS如下：

input {
    color: #333;
    caret-color: red;
}
@supports (-webkit-mask: none) and (not (cater-color: red)) {
    input { color: red; }
    input::first-line { color: #333; }
}

效果如下截圖（Firefox截圖）：

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS改變輸入框光標(biāo)顏色的原生屬性caret-color怎么用”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!