How to change cursor color without changing text color?

Question

I want to have the cursor #FFF while my font is #000.

Is that possible?

Solution 1

You can make a custom one.

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

Solution 2

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);

Solution 3

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.

Solution 4

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

Solution 5

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>

View more solutions

Comments

[Karl Nicoll]

Do you mean the caret inside a text box?

[Devin Burke]

The cursor generally is white. Are you sure you mean 'cursor'?

[Jay Ponkia]

Answer is good. It is working fine in chrome. But it is not working in internet explorer