Як зробити введення тексту не редагованим?

Тож у мене є введення тексту

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

Ось мій CSS для цього

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; 

Чи є налаштування чи хитрість до цього, я думав замість цього зробити ярлик, але як щодо стилізації. Як їх конвертувати і чи є кращий спосіб чи це єдиний спосіб?

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

Не потрібно стайлінгу.

Дивіться <input>на MDN https://developer.mozilla.org/en/docs/Web/HTML/Element/input#Attributes

Ви можете додати атрибут readonlyдо вводу:

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

Більше інформації: http://www.w3schools.com/tags/att_input_readonly.asp

Ви можете використовувати readonlyатрибут, якщо ви хочете, щоб ваш текст був лише прочитаним. І ви можете використовувати disabledатрибут, якщо ви хочете, щоб показ відображався, але повністю відключений (навіть мови обробки, такі як PHP, не зможете їх читати).

Просто для заповнення доступних відповідей:

Елемент введення може бути або лише прочитаний, або відключений (жоден з них не можна редагувати, але є кілька відмінностей: фокус, ...)

Хороше пояснення можна знайти тут:
Яка різниця між відключеними = “відключена” та readonly = “лише для читання” для полів введення HTML-форми?

Як користуватись:

<input type="text" value="Example" disabled /> 
<input type="text" value="Example" readonly />

Існує також кілька рішень, щоб зробити це через CSS або JavaScript, як пояснено тут .

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

Ви можете побачити на https://www.w3schools.com/tags/att_input_readonly.asp

Спосіб встановлення "лише для читання":

$("input").attr("readonly", true)

скасувати "readonly" (робота в jQuery):

$("input").attr("readonly", false)

додайте атрибут readonly

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

або -

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

не потрібно CSS!

потрібно лише додати інвалід наприкінці

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

Додати readonly:

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

Якщо ви хочете, щоб значення не було подано у формі, замість цього додайте disabledатрибут.

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

Немає можливості використовувати CSS, який завжди працює для цього.

Чому? CSS нічого не може "відключити". Ви все ще можете вимкнути відображення чи видимість та використовувати, pointer-events: noneале pointer-eventsне працює на версіях IE, які вийшли раніше IE 11.

якщо ви дійсно хочете використовувати CSS , використовуйте наступне властивість, яке зробить поле не редагуваним.

pointer-events: none;