Ionic3: Change cursor color in input fields

Question

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.

Any help would be appreciated.

It is possible by CSS I had implemented this long ago, not sure this blog was the same blog that I referenced but it might help https://gist.github.com/JoeKeikun/72718f5faaf518304024 — vaibhavmaster, Jul 07 '17 at 07:17
Does this work ? input { color: blue; text-shadow: 0px 0px 0px #000; -webkit-text-fill-color: transparent; } input::-webkit-input-placeholder, { color: text-shadow: none; -webkit-text-fill-color: yellow; } — Vega, Jul 14 '17 at 13:15

JGFMK · Answer 1 · 2017-07-17T16:20:32.673

1

BTW: What type of input are you talking about?

<ion-input> 
<ion-searchbar>
<input>

There was also this post on caret's because you said cursor. This was admittedly Mozilla focused, There is a W3C draft for this. The CSS caret-color

You might also check out src/theme/variables.scss in your project explorer
And here in the documentation
But I suspect that might not yield much. Filtering based on search terms of 'input','color', or 'md' in the documentation, would be my stab at it.

edited Jul 17 '17 at 16:20

answered Jul 17 '17 at 15:52

JGFMK

8,425
4
58
92

Thanks for your answer. The screenshot is an ``. However, the same issue occurs when using an``. I didn't try ``, but I guess it's going to be the same there. I already checked the documentation and the available variables to override, however I didn't find anything. Thank you anyway. Doesn't seem as easy as I thought. I just expected that it would be normal behaviour to just use the primary color for this. – Jane Dawson Jul 19 '17 at 06:30
The type of element was in case there was something that SASS variables targeted specifically. But since we're talking about caret/cursor it probably was unfortunately moot. – JGFMK Jul 19 '17 at 08:19

score 1 · Answer 2 · answered Feb 14 '18 at 14:11

1

Just use CSS for that search input i.e caret-color Follow this link for more details CSS caret-color

answered Feb 14 '18 at 14:11

Sheikh Wasim

21
3

score 1 · Answer 3 · answered Aug 22 '18 at 23:51

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

score 1 · Answer 4 · answered Dec 11 '18 at 05:30

1

Add this to your input:

caret-color: #ffffff;

answered Dec 11 '18 at 05:30

score 0 · Answer 5 · answered Jul 18 '17 at 13:00

0

if you are looking for that green line fix, then you can work around outline/border color, so my approach would be, on focus

#yourInput:focus{
  border-color : blue;
  //outline-color : blue:
}

Hope it helps :)

answered Jul 18 '17 at 13:00

art-fan-vikram

315
2
12

Green line fix? I'm actually talking about the cursor or however to call it properly. Not the input line. I know how to change this ;-) – Jane Dawson Jul 19 '17 at 06:32
Oh.., I didn't catch that, I too will search for it and let you know – art-fan-vikram Jul 20 '17 at 08:08

Ionic3: Change cursor color in input fields

5 Answers5