htmlcsshtml-input

How do I make a text input non-editable?

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;

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?

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

    No styling necessary.

    See <input> on MDN https://developer.mozilla.org/en/docs/Web/HTML/Element/input#Attributes