How to CSS the cursor in an input? (The flashing line)

Question

How do I change the CSS of the flashing line cursor in an input?

I know it works to change the mouse pointer with cursor: pointer/text/... but that's not what I mean.

Answer 1

It seems you want to style your cursor pointer inside the text box. To do this you can simply do the following :

HTML

<input type='text'/>

CSS

input,
textarea { // Style for your cursor
    font-size: 14px;
    padding: 2px;
    color: blue;
    text-shadow: 0px 0px 0px #000;
    -webkit-text-fill-color: transparent;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { // Style for your placeholder 
    color: #ccc;
    text-shadow: none;
    -webkit-text-fill-color: initial;
}