How To Change Default Color Of Caret On Ios For Inputs?

Is there any way to change blue colored caret on iOS for inputs? UPDATE: So caret-color property will fix this 'issue' when it will be supported in ios. check browser support when

Solution 1:

I am not sure what the compatibility of -webkit-text-fill-color is, but if that is acceptable for compatibility you can use a combination of that, text-shadow, color, and background-color with css to create the desired input. No JS is required.

This basis for this approach was described here: https://stackoverflow.com/a/30031723/1026459

The blue can be hard to see (if you change it to white it is a little more obvious).

input{
  color: #456ce1;
  text-shadow: 0px0px0px red;
  -webkit-text-fill-color: transparent;
  background-color: #272b36;
}

<inputvalue = "CHCJ"/>

Don't forget to focus the input field with your mouse.

Solution 2:

caret-color property is finally supported in ios so now you can change the color of the caret.

input {
  font-size: 20px;
  caret-color: red;
}

<inputtype="text">