How to remove the caret from an input element [duplicate]

Question

This question already has answers here:

Hide textfield blinking cursor (12 answers)

Closed 6 years ago.

How can I remove the caret from a <input type="text"> element only using CSS and not JavaScript?

Answer 1

Of course you can do it just with CSS.

Add this code to your CSS file:

border: none;
color: transparent;
text-shadow: 0 0 0 gray;
text-align: center;

&:focus {
    outline: none;
}

Here you have the SOURCE and a DEMO

Answer 2

I can only say you that you can achieve this by applying the color through css :

<input type="text" style="color: transparent;text-shadow: 0 0 0 red;" />

FIDDLE DEMO

Otherwise there is no way to style the text cursor with CSS.