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?
Just to complete the answers available:
An input element can be either readonly or disabled (none of them is editable, but there are a couple of differences: focus,...)
Good explanation can be found here:
What's the difference between disabled=“disabled” and readonly=“readonly” for HTML form input fields?
How to use:
<input type="text" value="Example" disabled />
<input type="text" value="Example" readonly />
There are also some solutions to make it through CSS or JavaScript as explained here.
Add readonly:
<input type="text" value="3" class="field left" readonly>
If you want the value to be not submitted in a form, instead add the disabled attribute.
<input type="text" value="3" class="field left" disabled>
There is no way to use CSS that always works to do this.
Why? CSS can't "disable" anything. You can still turn off display or visibility and use pointer-events: none but pointer-events doesn't work on versions of IE that came out earlier than IE 11.
if you really want to use CSS, use following property which will make field non-editable.
pointer-events: none;