How to change <input> input cursor color by css (webkit)

input_cursor_color

When I developed an app for ios by phonegap, I had a trouble in changing the <input> input cursor color.

but now, there is a solution for it:

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




this will change placeholder's color too. If we also need to change placeholder's color after this, we can use this:

---------------
<style>
input::-webkit-input-placeholder{
  color: rgb(60, 0, 248);  /* change [placeholder color] by this*/
  text-shadow: none;
  -webkit-text-fill-color: initial;
}
</style>
---------------

Awesome!

This is not working for me. I tried adding the same styles it is working in Chrome and safari of OSX but not in iOS.

This is great, cheers!

wooot...
awesome solution saved me from writing yet another javascript :D

Best solution I've found so far 👏

Someone have a idea how to remove the blinking effect of caret ?

it's so cool, thanks a lot!

Awesome! Would like to see what browser support there is for this. I think -webkit-text-fill-color is the limiting factor.

Not working.

Not working for me in iOS Safari

Not working in iOS safari

Not working in IE T.T

Use caret-color instead!

input {
caret-color : rgb(60, 0, 248);
}

Nice code. thanks for the tip.

please let me know how to css use only on iphone caret-color:transparent;