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 you are here in the future https://caniuse.com/#feat=css-caret-color

回答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: 0px 0px 0px red;
  -webkit-text-fill-color: transparent;
  background-color: #272b36;
}

<input value = "CHCJ"/>

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

回答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;
}

<input type="text">

来源：https://stackoverflow.com/questions/30655753/how-to-change-default-color-of-caret-on-ios-for-inputs