純css改變input的游標顏色,字型顏色不變(設定游標顏色與字型顏色不同)
阿新 • • 發佈:2018-11-06
使用input輸入框時,預設游標顏色是和字型顏色相同的,只需css設定color屬性就可以同時改變游標和字型顏色
但有時的需求是游標和字型顏色不一樣,網上的caret方法經測試chrome並不管用,所以,程式碼如下
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>改變input按鈕的游標顏色,不改變字型顏色</title> <style> #input1 { color: #000; } #input2 { /*改變游標顏色*/ color: red; text-shadow: 0px 0px 0px #000; -webkit-text-fill-color: transparent; } </style> </head> <body> 設定color顏色,游標顏色和字型顏色相同<input id="input1" type="text"/> <br/> <br/> 只改變游標顏色,不改變字型顏色: <input id="input2" type="text"/> </body> </html>
相容性:測試了chrome和ie瀏覽器,chrome下生效,ie下無效
如果大家有好的方法,歡迎留言~~