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

1、css改變輸入框光標(biāo)顏色的原生屬性caret一、css轉(zhuǎn)變輸入框光標(biāo)色彩的原生屬性caret-colorcss caret-color屬性可以轉(zhuǎn)變輸入框插入光標(biāo)的色彩，同時(shí)又不轉(zhuǎn)變輸入框里面的內(nèi)容的色彩。例如：input color: 333; caret-color: red; 結(jié)果光標(biāo)色彩變成紅色，文字還是深黑色：眼見為實(shí)，您可以狠狠的點(diǎn)擊這里：css caret-color轉(zhuǎn)變光標(biāo)色彩demo/zxx: 單詞caret表示插入符號(hào)，指處于內(nèi)容可插入狀態(tài)的光標(biāo)。caret-color屬性不僅對(duì)于原生的輸入表單控件有效，設(shè)置contenteditable的一般html標(biāo)簽也適用。例如：con

2、tenteditable="true" width: 120px; border: 1px solid ddd; padding: 3px; line-height: 20px; color: 333; caret-color: red; 文字效果如下圖：兼容性caret-color屬性目前chrome和firefox基本上可以放心用法，但是safari以及ie掃瞄器則還需要等待一些時(shí)日。詳細(xì)兼容性數(shù)據(jù)見下截圖：下面問(wèn)題來(lái)了，對(duì)于這些不兼容的掃瞄器，有沒(méi)有什么其他方法可以讓他們也能實(shí)現(xiàn)插入狀態(tài)光標(biāo)的變色效果呢？二、其他辦法轉(zhuǎn)變輸入框的閃耀的光標(biāo)色彩對(duì)于ie掃

3、瞄器，其光標(biāo)色彩看上去是永久固定的黑色，并不尾隨輸入框的色彩color變幻，因此對(duì)于ie掃瞄器，是沒(méi)有什么好辦法的。但是，對(duì)于safari掃瞄器，因?yàn)檩斎肟蚩丶拈W耀光標(biāo)色彩是和設(shè)置的color屬性色彩全都，因此我們是有手段可以對(duì)光標(biāo)舉行控制的。詳細(xì)實(shí)現(xiàn)代碼如下：input color: red; input:first-line color: 333; 于是效果即達(dá)成。您可以狠狠地點(diǎn)擊這里：借助:first-line轉(zhuǎn)變插入光標(biāo)色彩demosafari掃瞄器下截圖效果如下：借助:first-line偽元素的辦法在chrome，safari掃瞄器下表現(xiàn)良好，但是firefox掃瞄器并不支持，其

4、表現(xiàn)為輸入框里面的內(nèi)容不屬于:first-line，因此，囫圇輸入框文字都是紅色。對(duì)于不支持:first-line辦法的掃瞄器，相關(guān)css會(huì)污染正常的樣式表現(xiàn)，因此我們需要區(qū)別處理，例如可以這樣：input, input:first-line color: 333; supports (-webkit-mask: none) input color: red; 然而這種辦法也有局限性，對(duì)于這種多行輸入控件就無(wú)能為力，由于: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