css 更改输入光标/插入符号颜色

Question

首先谢谢你。

我想实现这样的功能：（对于<input>节点）

1. 占位文字的颜色为：#b8b9b9

2. 您输入的文字颜色为：#4e5050

3. 输入插入符号的颜色为：#FF0000

我已经实现了前两个功能1和2，代码是：

input[type='text']::-webkit-input-placeholder{
  color: #b8b9b9;
}
input[type='text']:-moz-placeholder{
  color: #b8b9b9;
}
input[type='text']::-moz-placeholder{
  color: #b8b9b9;
}
input[type='text']:-ms-input-placeholder{
  color: #b8b9b9;
}
input[type='text']:focus {
  color: #4e5050;
}

但我不知道如何实现功能3。

我已经尝试过Styling text input caret上的功能， 但这不适用于移动 Safari 浏览器。移动 safari 输入脱字符号颜色已经是 iphone 的默认颜色：蓝色

Answer 1

使用现代 CSS！

input {
    caret-color : #FF0000;
}

Answer 2

您可以通过此选项将图像分配给光标的任何元素

div {
   cursor: url(YOUR_IMAGE_URL), auto;
}