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

【问题标题】：Ionic3: Change cursor color in input fieldsIonic3：更改输入字段中的光标颜色
【发布时间】：2017-07-07 06:35:25
【问题描述】：

如何在 Android 上的 Ionic 3 应用程序中更改文本输入字段的光标颜色（或者调用可让您移动到某些文本中所需位置的标记）？从以下屏幕截图中可以看出，光标当前为绿色。在其他输入字段中，它是蓝色的。我想把它改成我的原色。

任何帮助将不胜感激。

【问题讨论】：

可能通过 CSS 我很久以前就实现了，不确定这个博客是不是我引用的同一个博客，但它可能会帮助gist.github.com/JoeKeikun/72718f5faaf518304024
谢谢，@vaibhavmaster。不幸的是，这不起作用。
这行得通吗？输入{颜色：蓝色；文字阴影：0px 0px 0px #000; -webkit-text-fill-color：透明； } 输入::-webkit-input-placeholder，{ 颜色：文本阴影：无； -webkit-text-fill-color：黄色； }
谢谢。不幸的是它没有@Vega。
webkit 是 ioS/Apple 的东西 - 要求 Android。

【解决方案1】：

顺便说一句：你在说什么类型的输入？

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

caret's 上也有这个帖子，因为你说光标。这无疑是Mozilla 的重点，有一个W3C draft 用于此。 CSS caret-color

您也可以在项目浏览器中查看 src/theme/variables.scss
还有here in the documentation
但我怀疑这可能收效甚微。根据文档中的“input”、“color”或“md”搜索词进行过滤，将是我的尝试。

【讨论】：

感谢您的回答。截图是<ion-searchbar>。但是，使用<ion-input> 时会出现同样的问题。我没有尝试<input>，但我想那里会是一样的。我已经检查了文档和要覆盖的可用变量，但是我没有找到任何东西。还是非常感谢。似乎没有我想的那么容易。我只是希望为此使用原色是正常行为。
元素的类型是为了防止 SASS 变量专门针对某些东西。但由于我们谈论的是插入符号/光标，不幸的是它可能没有实际意义。

【解决方案2】：

如果有人正在寻找答案：

在浏览器中，您可以在输入中的 '.item-inner' 类上使用 'caret-color: red'，但在 Android 和 IOS 中不起作用。

为他们做这件事的方法是在 .input 类中，如下所示：

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
}

这个解决方案来自这个链接：https://gist.github.com/JoeKeikun/72718f5faaf518304024

希望对你有帮助；）

【讨论】：

【解决方案3】：

如果您正在寻找绿线修复，那么您可以解决轮廓/边框颜色，所以我的方法是专注

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

希望对你有帮助:)

【讨论】：

绿线修复？我实际上是在谈论光标，或者正确地调用它。不是输入线。我知道如何改变这个;-)
哦..我没听懂，我也去搜一下告诉你

【解决方案4】：

只需将 CSS 用于该搜索输入，即 caret-color 点击此链接了解更多详情CSS caret-color

【讨论】：

【解决方案5】：

将此添加到您的输入中：

caret-color: #ffffff;

【讨论】：