How to change cursor color without changing text color?

I want to have the cursor #FFF while my font is 开发者_如何学Python#000.

Is that possible?

---

You can make a custom one.

input, textarea {
    cursor: url(cursor.cur);
}

---

From the mozilla docs

/* Keyword values */
caret-color: auto;
caret-color: transparent;
caret-color: currentColor;

/* <color> values */
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);

---

Yes it's easy. Set your font color normally then use a custom cursor.

http://beradrian.wordpress.com/2008/01/08/cross-browser-custom-css-cursors/

That does depend on wether the custom cursor can be color, I'm just assuming it can be.

---

to change caret color CSS of input type text and textarea use below css

input,textarea {
     color: #8f0407;
     text-shadow: 0px 0px 0px #000 ;
     -webkit-text-fill-color: transparent ;
}

input::-webkit-input-placeholder,
     textarea::-webkit-input-placeholder {
     color: #ccc;
     text-shadow: none;
     -webkit-text-fill-color: initial;
}

Codepen Demo

---

Try this

<style>
input {
  color: rgb(60, 0, 248);  /* change [input cursor color] by this*/
  text-shadow: 0px 0px 0px #D60B0B; /* change [input font] by this*/
  -webkit-text-fill-color: transparent;
}
</style>