How to change default color of caret on iOS for inputs?

Question

Is there any way to change blue colored caret on iOS for inputs?

enter image description here

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

Thanks for replying. I must implement my own caret component for iOS then. — Genti Saliu, Aug 18 '16 at 16:57

score 0 · Answer 1 · edited May 23 '17 at 12:33

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.

Thanks for your response Travis. I know about this snippet but unfortunately it doesnt work for me on iphones. — Joe Koker, Jun 04 '15 at 23:54

Joe Koker · Accepted Answer · 2019-03-12T22:14:54.400

0

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

edited Mar 12 '19 at 22:14

answered Mar 12 '19 at 22:00

Joe Koker

931
10
20

How to change default color of caret on iOS for inputs?

2 Answers2

Linked