How to remove the caret from an input element

Question

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

You mean the insertion point cursor (caret)? Why would you want to remove it? — Lee Taylor, May 07 '14 at 10:52
If anyone still looking for an answer. caret-color:"transparent",cursor:"default and if you are using react, onKeyDown={(e) => { e.preventDefault(0 }} will disable the edit — anusha chokka, Mar 27 '22 at 21:33

score 43 · Accepted Answer · answered May 07 '14 at 10:55

43

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

answered May 07 '14 at 10:55

Rafa Romero

8

Not working in IE – Rajesh Omanakuttan Aug 26 '14 at 04:48
2

All I had found were awful hacks done with javascript and two input fields. Thanks so much for this solution! So simple :) – forgivenson Jun 03 '16 at 16:46
2

Works in Edge, Chrome, Firefox but not IE10/11. – Perfection Jul 11 '16 at 08:13
7

The `&` is scss, not base css – Hastig Zusammenstellen Nov 23 '16 at 12:00
Not working in IE 11 – Hnin Htet Htet Aung Sep 06 '18 at 03:53
1

it can be done with using caret-color property. https://stackoverflow.com/a/48389261/5749192 – Gabriel Brito Jul 11 '20 at 03:51

score 8 · Answer 2 · answered May 07 '14 at 11:14

8

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;" />

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

answered May 07 '14 at 11:14

Rakesh Shetty

Not working in IE 11 :( – Ashutosh Jha Dec 14 '17 at 05:57
1

@Rakesh Shetty, you've just copied Rafa Romero's answer! – Davide Cannizzo Feb 07 '18 at 23:18

2 Answers2