How to change the color of the input cursor?

Question

I want to change the flickering color of the cursor when someone presses the input button of the input form, such as: name, username, password, etc.

Answer 1

"Carriage" is the word you are looking for. I really believe that this is part of the design of browsers, and not within css.

However, here is an interesting post on modeling carat changes using Javascript and CSS http://www.dynamicdrive.com/forums/showthread.php?t=17450 It seems to me a little hacked, but probably the only way to complete the task. The main topic of the article is:

- , " ", , , , , "", .

(: )

---

, , , :)

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

- 56% 2017