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