表單對大家來說并不陌生，當然，我也不是來和大家聊怎么做表單或者處理表單的樣式網格，因為這些對于大家來說都是小兒科的東西。而是來聊聊怎么改變表單控件中光標的顏色。日常開發中我們可能會有改變input光標顏色的需求，在谷歌瀏覽器的默認光標顏色是黑色的，而表單控件的光標顏色是根據color屬性來控制的。那么如果需要用CSS來改變表單控件，比如說input或者textarea元素的光標顏色，那么這個用CSS怎么改變呢??先來看一下效果圖：

這種效果有兩種實現方式：

1.使用color來實現

光標的顏色是繼承自當前輸入框字體的顏色，所以用color屬性即可改變：

input{

color:red;

}

效果如下：

CSS改變輸入框光標顏色的原生屬性caret-color

caret-color?屬性用來定義插入光標(caret)的顏色，這里說的插入光標，就是那個在網頁的可編輯器區域內，用來指示用戶的輸入具體會插入到哪里的那個一閃一閃的形似豎杠?|?的東西。

上面說的“插入光標”(insertion caret)只是光標(caret)的其中一種。比如一些瀏覽器有一種光標叫做“導航光標“(navigation caret)，它可以在不可編輯區域內來回移動。此外，當鼠標指針移動到一段?cursor?屬性是?auto?的文本上方時，或移動到?cursor?屬性是?text、?vertical-text?的內容上方時，雖然看起來有點像插入光標，但它不是插入光標(caret)，而是鼠標指針光標(cursor)。

上一種方式已經修改了光標的顏色但是字體的顏色也改變了，如果只想改變光標的顏色而不改變字體的顏色那就使用caret-color屬性:

input{

caret-color:red;

}

效果如下：

caret-color屬性不僅對于原生的輸入表單控件有效，設置contenteditable的普通HTML標簽也適用。

例如：

[contenteditable="true"] {

width: 120px;

border: 1px solid #ddd;

padding: 3px;

line-height: 20px;

color: #333;

caret-color: red;

}

文字

效果如下圖：

兼容性

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

具體兼容性數據見下截圖：

下面問題來了，對于這些不兼容的瀏覽器，有沒有什么其他辦法可以讓他們也能實現插入狀態光標的變色效果呢？

其他方法改變輸入框的閃爍的光標顏色

對于IE瀏覽器，其光標顏色看上去是永遠固定的黑色，并不跟隨輸入框的顏色color變化，因此對于IE瀏覽器，是沒有什么好方法的。

但是，對于Safari瀏覽器，由于輸入框控件的閃爍光標顏色是和設置的color屬性顏色一致，因此我們是有手段可以對光標進行控制的。

具體實現代碼如下：

input {

color: red;

}

input::first-line {

color: #333;

}

Safari瀏覽器下截圖效果如下：

借助::first-line偽元素的方法在Chrome，Safari瀏覽器下表現良好，但是Firefox瀏覽器并不支持，其表現為輸入框里面的內容不屬于::first-line，因此，整個輸入框文字都是紅色。

對于不支持::first-line方法的瀏覽器，相關CSS會污染正常的樣式表現，因此我們需要區分處理，例如可以這樣：

input, input::first-line {

color: #333;

}

@supports (-webkit-mask: none) {

input { color: red; }

}

然而這種方法也有局限性，對于這種多行輸入控件就無能為力，因為::first-line只能控制首行元素顏色。

兩種實現方法綜合

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

如果瀏覽器支持caret-color屬性，優先使用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截圖)：

結束語

但是在IE瀏覽器中輸入光標的顏色自定義，怕是要借助JS才能實現，而且還不好實現，如何實時知道光標位置在哪里，什么時候消失什么時候沒有是個很難實現的問題。最好的解決方法就是忽略IE瀏覽器

總結

以上是生活随笔為你收集整理的css input光标粗细,如何用CSS原生属性caret-color改变input输入框光标颜色的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。