Ionic3: Change cursor color in input fields

Viewed 2128

How can I change the color of the cursor for text-input-fields in my Ionic 3 app on android (or however to call the marker that lets you move to a desired position in some text)? As you can see from the following screenshot, the cursor is currently green. In other Input-fields it is blue. I want to change it to my primary color.

http://i.imgur.com/yTc6QZT.png

Any help would be appreciated.

5 Answers

In case Anyone is looking for the answer:

In the browser you can use 'caret-color: red' over the '.item-inner' class inside the input, but in Android and IOS wont work.

The way to do it for them is in the .input class like this:

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; //This changes the color of the text in the input
}

This solution comes from this links: https://gist.github.com/JoeKeikun/72718f5faaf518304024

Hope it helps ;)

Add this to your input:

caret-color: #ffffff;
Related