iOS safari输入插入颜色

Question

我在iPhone设备上遇到了一个很小的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;
  }
}

Answer 1

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

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是currently supported。也许是个好消息：似乎Safari也支持它的技术预览版本，所以也许iOS Safari会跟随它。