How do I make a text input non-editable?

html css html-input
Matt Elhotiby picture Matt Elhotiby · Sep 9, 2010 · Viewed 648.7k times · Source

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?

Answer

BoltClock picture BoltClock · Sep 9, 2010 
<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

Related questions

Change an HTML5 input's placeholder color with CSS

Chrome supports the placeholder attribute on input[type=text] elements (others probably do too). But the following CSS doesn't do anything to the placeholder's value: Value will still remain grey instead of red. Is there a way to change the …

Read More
CSS selector for text input fields?

How can I target input fields of type 'text' using CSS selectors?

Read More
How to align texts inside of an input?

For all default inputs, the text you fill starts on the left. How do you make it start on the right?

Read More