Question

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

Answer 1

＆＃39;插入符＆＃39;是你要找的词。我确实相信，它是浏览器设计的一部分，而不是在css的掌握之中。

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

我们将在视图中的屏幕中的某个地方放置一个简单的textarea 当观看者和用户点击我们的假终端时＃34;我们会专注于textarea，当用户开始输入时，我们将简单地将输入到textarea的数据附加到我们的＆＃34;终端＆＃34;那是这一点。

HERE是一个实际的演示

（来源：Michael Jasper's post）

另一种解决方案

我changed how it works，似乎解决了一些问题：）

接受正常输入可以
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;
}

Browser Support - 56% as of Aug 2017

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

2 个答案: