如何改变输入框光标的颜色？

Question

我想改变闪烁光标的颜色，当有人点击唱歌窗体的输入框如下:名称，用户名，密码等。

Answer 1

“卡雷特”是你要找的词。不过，我确实相信，它是浏览器设计的一部分，而不是css所能掌握的。

然而，这里有一篇有趣的文章，描述了使用Javascript和CSS http://www.dynamicdrive.com/forums/showthread.php?t=17450模拟克拉变--在我看来，这似乎有点麻烦，但可能是完成任务的唯一方法。该条的要点是：

我们将在屏幕上的某个地方有一个简单的文本区域，当用户单击我们的“假终端”时，我们将焦点放在文本区域，当用户开始键入时，我们只需将输入到文本区域的数据附加到我们的“终端”中，就是这样。

这里 是一个动作的演示。

(资料来源：迈克尔·贾斯珀的职位)

另一个解决方案

​

​

我有改变了它的工作方式，它似乎解决了一些问题:)

• 接受普通输入可以接收的任何文本
• 背空间工程
• 理论上可以支持粘贴文本。

通常的注意事项仍然适用，最明显的是无法直观地看到插入符号所在的位置。

考虑到这个解决方案的缺点和可用性问题，我认为这个解决方案是否值得实现。

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

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

CSS

#cmd {
    font-family: courier;
    font-size: 14px;
    background: black;
    color: #21f838;
    padding: 5px;
    overflow: hidden;
}

#cmd span {
    float: left;
    padding-left: 3px;
    white-space: pre;
}

#cursor {
    float: left;
    width: 5px;
    height: 14px;
    background: #21f838;
}

input {
    width: 0;
    height: 0;
    opacity: 0;
}

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

Answer 2

使用现代CSS！

input {
    caret-color : red;
}

浏览器支持-截至10月21日95%