輸入框里那個一閃一閃的游標如何改變樣式？

jQuery

---

遇上提這樣需求的 PM 你就揍他一頓好了

---

使用caret-color這個CSS屬性即可更改

caret-color

-----------------------------------------------

/* Keyword values */

caret-color: auto;

caret-color: transparent;

caret-color: currentColor;

/* values */

caret-color: red;

caret-color: #5729e9;

caret-color: rgb(0, 200, 0);

caret-color: hsla(228, 4%, 24%, 0.8)

-----------------------------------------------

這是純CSS3的簡單實現。

更改color會同時更改文字顏色和游標顏色。

但是如果使用這個，只會更改閃動的游標顏色

---

利用CSS3 修改輸入框閃爍游標的顏色 貼個自己小站上的帖子，供參考

---

難道不是直接改input的顏色屬性？color:red;游標就成紅色了

---

Examples for JQuery Terminal Emulator Plugin可以試試這個插件，剛看到貌似可以模擬輸入形式的，如果是原生textarea之類的應該改不了游標樣式了

---

如果是input之類元素，應該取決於系統，即很難通過CSS之類達到目的；應該可以自己模擬一個輸入控制項。

---

正好我也在找這個實現的方法，目前想出來的方法是這樣：

用一個div小方塊代替游標，然後設置閃爍動畫。用隱藏的textarea獲取輸入，onchange事件改變小游標前面的內容，然後回車就清空textarea的內容。

游標小方塊閃爍動畫寫法：

參考了前面 @xuu shi 回答里的jquery terminal的css cursor的代碼。

JQuery Terminal Emulator Plugin

& @keyframes blink {
50% {
color: #000;
background: #0c0;
-webkit-box-shadow: 0 0 5px rgba(0,100,0,50);
box-shadow: 0 0 5px rgba(0,100,0,50);
}
}
@-webkit-keyframes blink {
50% {
color: #000;
background: #0c0;
-webkit-box-shadow: 0 0 5px rgba(0,100,0,50);
box-shadow: 0 0 5px rgba(0,100,0,50);
}
}
@-ms-keyframes blink {
50% {
color: #000;
background: #0c0;
-webkit-box-shadow: 0 0 5px rgba(0,100,0,50);
box-shadow: 0 0 5px rgba(0,100,0,50);
}
}
@-moz-keyframes blink {
50% {
color: #000;
background: #0c0;
-webkit-box-shadow: 0 0 5px rgba(0,100,0,50);
box-shadow: 0 0 5px rgba(0,100,0,50);
}
}
.cmd .cursor.blink {
-webkit-animation: 1s blink infinite;
animation: 1s blink infinite;
-webkit-box-shadow: 0 0 0 rgba(0,100,0,50);
box-shadow: 0 0 0 rgba(0,100,0,50);
border: none;
margin: 0;
}
& &
&輸入內容
&
& &

強答，希望有用。正在用這個寫一個網頁命令行的博客系統~寫好來更

---

CSS目前是沒有直接設置輸入游標顏色的說法。只是輸入游標在個別瀏覽器是會跟著字體顏色值進行改變的，比如color:red，個別瀏覽器會變紅色。當然如果設置為黑色的或者直接initial的會默認為藍色。

---

CSS4可以改了， 不知何時實施， 鏈接找不到了。

---

推薦閱讀：