テキスト入力を編集不可にするにはどうすればよいですか？

だから私はテキスト入力を持っています

<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のような処理言語でさえ、それらを読み取ることができません）。

利用可能な回答を完了するためだけに：

入力要素は、読み取り専用または無効にすることができます（編集可能なものはありませんが、いくつかの違いがあります：フォーカスなど）。

良い説明はここで見つけることができます：
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)

「読み取り専用」をキャンセルするには（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 11より前にリリースされたバージョンのIEでは機能しません。

CSSを本当に使用したい場合は、次のプロパティを使用してフィールドを編集不可にします。

pointer-events: none;