CSS如何改变输入框光标颜色?

4

首先感谢您。

我想要实现以下功能:(针对 <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;
}

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

我已经尝试在样式化文本输入插入符号上使用该功能,但这对移动safari浏览器无效。移动safari输入插入符号的颜色已经是iphone的默认颜色:蓝色。


1
已经有一个答案了 https://dev59.com/Z2s05IYBdhLWcg3wR_22 - Ganesh Putta
谢谢,但它在移动Safari浏览器上不起作用。 - zctocm
2个回答

7

使用现代CSS!

input {
    caret-color : #FF0000;
}

-2

你可以通过这个选项将任何元素的鼠标指针分配给一个图像。

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

如果我给一个图片指定了固定的宽度和高度,当我改变输入框的高度时,光标图片的高度会适应输入框的高度吗? - zctocm
3
如果我理解得正确,"cursor" 指的是鼠标指针,您想要找的是 "caret"(闪烁的竖线)的颜色。请注意,本文中不涉及任何解释或除翻译外的其他内容。 - Mosh Feu
是的,插入符号的颜色。 - zctocm

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接