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

Question

我想更改闪烁光标颜色，当有人点击唱出表格的输入框时：名称，用户名，密码等。

Answer 1

'Caret'就是你要找的词。 我确实相信，它是浏览器设计的一部分，而不是在CSS的掌握之内。

然而，这是一个有趣的写一篇关于使用Javascript和CSS模拟克拉变化的文章http://www.dynamicdrive.com/forums/showthread.php?t=17450这对我来说似乎有点笨拙，但可能是唯一的方法完成任务。 这篇文章的重点是：

我们将在屏幕的某个地方有一个普通的textarea，在观看者的视野之外，当用户点击我们的“假终端”时，我们将专注于textarea，当用户开始输入时，我们只需将输入的数据附加到textarea中我们的“终端”就是这样。

这是一个实际的演示

（来源： Michael Jasper的帖子 ）

---

另一种方法

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

• 接受正常输入可以的任何文本
• Backspace工作
• 理论上可以支持粘贴文本

通常需要注意的是，最明显的是无法直观地看到插入符号的位置。

基于其缺点和可用性问题，我认为这个解决方案是否值得实施是多么艰难。

HTML

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

浏览器支持 - 截至2017年8月的56％