CODEWITHSUNDEEP
html
Moumita
Moumita

Reputation: 71

How to remove caret from text box?

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 do I remove the caret from the text box?

Upvotes: 7

Views: 9311

Answers (4)

Mwiza
Mwiza

Reputation: 8951

The mouse cursor has several CSS values. To remove the cursor from the textbox you can use the following

<input type="text" value="test2" style="cursor:none" readonly />

By setting it to none, the cursor will not be displayed. But you can also choose to use other styles like cursor:zoom-in. cursor: default etc. For more CSS cursor values, take a look at the MDN documentation here

Upvotes: 0

Grant Miller
Grant Miller

Reputation: 28999

If the browser shows the insertion caret when the readonly attribute is set on an input[type="text"] element, you may be able to use the caret-color CSS property to make the caret transparent:

.caret-hidden {
  caret-color: transparent;
}
<input class="caret-hidden" type="text" readonly>

Upvotes: 7

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146390

Poor man's solution: transmit value in a hidden form item (<input type="hidden">) and display it in a regular HTML container (<p></p>, <div></div> or whatever).

Upvotes: 1

Sparkup
Sparkup

Reputation: 3754

Do you mean this :

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

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

Upvotes: -1

Related Questions