Ionic3：更改输入字段中的光标颜色

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.

Answer 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.

Answer 2

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

Answer 3

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

Answer 4

只需使用CSS进行搜索输入即插入颜色请点击此链接获取更多详细信息CSS插入颜色

Answer 5

将此添加到您的输入：

caret-color: #ffffff;