Randomblue Randomblue - 1 year ago 203
HTML Question

Styling text input caret

I want to style the caret of a focused

<input type='text'/>
. Specifically, the color and thickness.

Answer Source

If you are using a webkit browser you can change the color of the caret by following the next CSS snippet. I'm not sure if It's possible to change the format with CSS.

textarea {
    font-size: 24px;
    padding: 10px;

    color: red;
    text-shadow: 0px 0px 0px #000;
    -webkit-text-fill-color: transparent;

textarea::-webkit-input-placeholder {
    text-shadow: none;
    -webkit-text-fill-color: initial;

Here is an example: http://jsfiddle.net/8k1k0awb/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download