How can I hide the blinking text field cursor using CSS?

Question

I created a speech recognition experiment here: http://jsfiddle.net/3Sm9R/3/ (only works in Chrome 11+)

However, the blinking cursor appears when the input is clicked. I want to hide it. What's the cleanest way to hide it?

Probably you can find you answers here: http://stackoverflow.com/questions/2162164/how-to-hide-the-text-box-blinking-cursor — Beto Aveiga, Jan 10 '12 at 22:45

score 0 · Accepted Answer · answered Aug 11 '13 at 07:20

0

The cursor color follows the text color.. So when setting the color to transparent, the cursor will disappear.

<input type="text" style="color: transparent;" x-webkit-speech />

answered Aug 11 '13 at 07:20

Marcel Verwey

Welcome to SO. This is an old question, so you may not get a response form the OP. My CSS knowledge is low, but won't your suggestion also hide the text? – Neil Slater Aug 11 '13 at 07:41
Yes it would. But (imo) it makes no sense hiding the blinking cursor when using it for text input. However when used as a button (in this case) it does.. – Marcel Verwey Aug 11 '13 at 14:21
IE11 displays the blinking caret even with transparent color settings. Any ideas how to trick that? – harry Mar 04 '15 at 14:53
@user3281466 - you can make text transparent (blinking cursor will dissapear as well), but at the same time use CSS shadow with 0px blur and 0px displacement to simulate text apparance in exatly the same spot where transparent text is. Very elegant solution. – Artanis Jan 28 '16 at 15:30
The cursor actually (inversely) follows background and not the text color so usually the cursor is black not because text is black but because background is white. – Usman Zaheer May 18 '16 at 21:34

score -2 · Answer 2 · edited May 23 '17 at 12:13

-2

Boils down to input[type=text]{ cursor: none; }

EDIT: looking at your jsfiddle, I now realize you are using the new speech input type, and this doesn't seem to work on that.

edited May 23 '17 at 12:13

Community

answered Jan 10 '12 at 22:45

idrumgood

4

The "cursor" in this question is actually the text caret, not the mouse pointer. So either way, your code wouldn't do what he's looking for. – BoltClock Jan 11 '12 at 18:09
The cursor pointer still stays since your CSS is not related to text-cursor. – Usman Zaheer May 18 '16 at 21:29

2 Answers2