CODEWITHSUNDEEP
javascripthtml
Saiful Islam
Saiful Islam

Reputation: 350

How to change input box cursor color?

I want to change blink cursor color, when someone click sing up form's input box such: name, username, password etc.

Upvotes: 4

Views: 5678

Answers (2)

Gibolt
Gibolt

Reputation: 47097

Use modern CSS!

input {
    caret-color : red;
}

Browser Support - 95% as of Oct '21

Upvotes: 1

Cas Bloem
Cas Bloem

Reputation: 5040

'Caret' is the word you are looking for. I do believe though, that it is part of the browsers design, and not within the grasp of css.

However, here is an interesting write up on simulating a carat change using Javascript and CSS http://www.dynamicdrive.com/forums/showthread.php?t=17450 It seems a bit hacky to me, but probably the only way to accomplish the task. The main point of the article is:

We will have a plain textarea somewhere in the screen out of the view of the viewer and when the user clicks on our "fake terminal" we will focus into the textarea and when the user starts typing we will simply append the data typed into the textarea to our "terminal" and that's that.

HERE is a demo in action

(source: Michael Jasper's post)

Another solution

https://i.sstatic.net/qWBoZ.png

I've changed how it works, and it seems to solve a few issues :)

  • Accepts any text a normal input can
  • Backspace works
  • Theoretically can support pasting text

Usual caveats apply still, most notably the inability to visually see where the caret is.

I'd think long and hard whether this solution is worth implementing, based on its drawbacks and usability issues.

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

Upvotes: 4

Related Questions