How to remove the cursor from a text field?

Question

Here is my code:

<table> <tr> <td><input type="text" value="test1" readonly /></td> </tr> <tr> <td><input type="text" value="test2" readonly /></td> </tr> <tr> <td><input type="text" value="test3" readonly /></td> </tr> </table> 

How to remove the cursor from a text field?

Answer 1

Bad solution: pass the value in a hidden form element ( <input type="hidden"> ) and display it in a regular HTML container ( <p></p> , <div></div> or something else).

Answer 2

If the browser shows the insertion cursor when the readonly attribute is set for the input[type="text"] element, you can use the caret-color CSS property to make the cursor transparent :

 .caret-hidden { caret-color: transparent; } 

 <input class="caret-hidden" type="text" readonly> 

Answer 3

You mean this:

 <input type="text" name="site" value="Stackoverflow" readonly="readonly" /> 

Demo: http://jsfiddle.net/UuZnh/