How to hide text box cursor using CSS?

Question

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

However, a flashing cursor appears when the input is pressed. I want to hide it. What is the cleanest way to hide it?

Answer 1

The color of the cursor follows the color of the text. Therefore, when you adjust the color to a transparent cursor, it disappears.

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

Answer 2

See this answer

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

EDIT: looking at your jsfiddle, I now understand that you are using a new type of speech input, and it doesn't seem to work.