Javascript 如何更改输入框光标颜色？

我想更改闪烁光标的颜色，当有人单击sing up表单的输入框时，例如：姓名、用户名、密码等。

插入符号是您要查找的单词。不过我相信，这是浏览器设计的一部分，而不是css所能掌握的

然而，这里有一篇关于使用Javascript和CSS模拟克拉变化的有趣文章，对我来说，这似乎有点黑客，但可能是完成任务的唯一方法。这篇文章的要点是：

我们将有一个普通的文本区域在屏幕的某个地方的看法 当用户点击我们的“假终端”时，我们将 关注文本区域，当用户开始键入时，我们只需 将文本区域中键入的数据附加到我们的“终端”中，这就是 那个

是一个正在进行的演示

（来源：）

---

另一种解决方案

我已经，而且它似乎解决了一些问题：）

• 接受普通输入可以接受的任何文本
• 退格工作
• 理论上可以支持粘贴文本

通常的警告仍然适用，最明显的是无法直观地看到插入符号的位置

基于它的缺点和可用性问题，我会仔细考虑这个解决方案是否值得实现

HTML

<div id="cmd">
   <span></span>
   <div id="cursor"></div>
</div>

<input type="text" name="command" value="">

jQuery

$(function () {
    var cursor;
    $('#cmd').click(function () {
        $('input').focus();
        cursor = window.setInterval(function () {
            if ($('#cursor').css('visibility') === 'visible') {
                $('#cursor').css({
                    visibility: 'hidden'
                });
            } else {
                $('#cursor').css({
                    visibility: 'visible'
                });
            }
        }, 500);

    });

    $('input').keyup(function () {
        $('#cmd span').text($(this).val());
    });

    $('input').blur(function () {
        clearInterval(cursor);
        $('#cursor').css({
            visibility: 'visible'
        });
    });
});

使用现代CSS

input {
    caret-color : red;
}

input {
    caret-color : red;
}