iOS Safari 输入脱字符号颜色答案

【问题标题】：iOS safari input caret coloriOS Safari 输入脱字符号颜色
【发布时间】：2019-08-22 21:58:54
【问题描述】：

我在 iPhone 设备上的 Safari 有一个小的 CSS 问题。我的搜索输入是蓝色的，当用户关注它时，插入符号几乎是不可见的：

在所有桌面浏览器中，它都有正确的颜色（白色），即使在桌面 Safari 上也是如此。知道如何解决此问题并在 iOS 设备上更改插入符号颜色吗？

输入样式：

input {
  background-color: $stateBlue;
  height: $navbarItemHeight;
  padding: 0 10px;
  vertical-align: bottom;
  color: $white;
  border-radius: $borderRadius;
  font-size: 1.1666666667em; // 16px
  -moz-appearance:none;
  -webkit-appearance:none;

  &::-webkit-input-placeholder {
    text-shadow: none;
    -webkit-text-fill-color: initial;
  }
}

【问题讨论】：

你解决了吗？我有同样的问题。
不是真的，似乎在原生 iOS 设备中通过 CSS 是不可能的。
谢谢。我最终实现了自己的插入符号。
@GentiSaliu 怎么样？你是用图片做的吗？
我使用了 div 并将其定位为与标准插入符号重叠、应用样式、使用超时添加闪烁行为，并使用键盘输入侦听器在用户在文本字段中输入内容时更新其位置。

标签： ios css safari

【解决方案1】：

有一个名为caret-color 的W3C specification 可以这样使用：

input[type="text"].custom {
  caret-color: red;
}

<div>
  <label>default caret:</label>
  <input type="text"/>
</div>
<div>
  <label>custom red caret:</label>
  <input type="text" class="custom"/>
</div>

它是 Chrome（也适用于 Android）、Firefox、Opera 和 Safari（包括 iOS）的 currently supported。

【讨论】：