CODEWITHSUNDEEP
htmlcss
AndrewFerrara
AndrewFerrara

Reputation: 2403

How to change cursor color without changing text color?

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

Is that possible?

Upvotes: 12

Views: 44692

Answers (5)

Matthew Harrison
Matthew Harrison

Reputation: 888

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

Upvotes: 9

Dev Bhaskar
Dev Bhaskar

Reputation: 139

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

Upvotes: 3

Balvant Ahir
Balvant Ahir

Reputation: 620

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>

Upvotes: 1

SpliFF
SpliFF

Reputation: 38976

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.

Upvotes: 4

alex
alex

Reputation: 490243

You can make a custom one.

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

Upvotes: 11

Related Questions