純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下無效
如果大家有好的方法，歡迎留言~~