How do I make a text input non editable

Question

So i have a text input

<input type="text" value="3" class="field left">

Here is my css for it

background:url("images/number-bg.png") no-repeat scroll 0 0 transparent;
border:0 none;
color:#FFFFFF;
height:17px;
margin:0 13px 0 0;
text-align:center;
width:17px; 

Here is the page

Is there a setting or a trick to this, I was thinking of doing a label instead but how about the styling. How do I convert them and is there a better way or is that the only way

Answer 1

<input type="text" value="3" class="field left" readonly="readonly" />

XHTML validity pedantry: self-closing elements need that / at the end.

Answer 2

You can add the attribute readonly to the input.

<input type="text" value="3" class="field left" readonly="readonly" >

http://www.w3schools.com/tags/att_input_readonly.asp

Answer 3

You can use readonly attribute, if you want your input only to be read. And you can use disabled attribute, if you want input to be shown, but totally disabled (even processing languages like PHP wont be able to read those).