iOS Safari输入光标颜色

Question

我在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;
  }
}

- Pawel

---

你解决了吗？我也遇到了同样的问题。 - Genti Saliu

不是很确定，似乎在原生iOS设备上无法通过CSS实现。 - Pawel

谢谢。最终我实现了自己的插入符号。 - Genti Saliu

@GentiSaliu，你是怎么做到的？是用图片吗？ - Aᴄʜᴇʀᴏɴғᴀɪʟ

我使用了一个 div 并将其定位重叠在标准插入符号上，应用样式，使用超时和键盘输入监听器添加了闪烁行为，以便在用户在文本字段中输入内容时更新其位置。 - Genti Saliu

@GentiSaliu，你能提供一下你的实现代码示例吗？特别是JavaScript部分会很有趣。你是如何将div放置在插入符位置上的？去年我们也遇到了同样的问题，当时认为没有解决方案。谢谢。 - Patrick Winkelmayer

Answer 1

有一个与此相关的W3C规范，称为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和Safari（包括iOS）都支持CSS的插入符颜色属性。

- Linus Caldwell