Comment rendre une entrée de texte non modifiable?

J'ai donc une entrée de texte

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

Voici mon CSS pour ça

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; 

Y a-t-il un cadre ou une astuce à cela, je pensais plutôt faire une étiquette mais qu'en est-il du style. Comment les convertir et existe-t-il une meilleure méthode ou est-ce la seule solution?

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

Aucun style nécessaire.

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

Vous pouvez ajouter l'attribut readonlyà l'entrée:

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

Plus d'informations: http://www.w3schools.com/tags/att_input_readonly.asp

Vous pouvez utiliser l' readonlyattribut, si vous souhaitez que votre entrée soit uniquement lue. Et vous pouvez utiliser l' disabledattribut, si vous voulez que l'entrée soit affichée, mais totalement désactivée (même les langages de traitement comme PHP ne pourront pas les lire).

Juste pour compléter les réponses disponibles:

Un élément d'entrée peut être en lecture seule ou désactivé (aucun d'entre eux n'est modifiable, mais il existe quelques différences: focus, ...)

Une bonne explication peut être trouvée ici:
Quelle est la différence entre désactivé = "désactivé" et readonly = "readonly" pour les champs de saisie de formulaire HTML?

Comment utiliser:

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

Il existe également des solutions pour le faire via CSS ou JavaScript, comme expliqué ici .

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

Vous pouvez voir dans https://www.w3schools.com/tags/att_input_readonly.asp

La méthode pour définir "en lecture seule":

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

pour annuler "en lecture seule" (travail dans jQuery):

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

ajouter l'attribut en lecture seule

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

ou -

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

aucun css nécessaire!

vous avez juste besoin d'ajouter désactivé à la fin

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

Ajouter readonly:

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

Si vous souhaitez que la valeur ne soit pas soumise dans un formulaire, ajoutez plutôt l' disabledattribut.

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

Il n'y a aucun moyen d'utiliser CSS qui fonctionne toujours pour ce faire.

Pourquoi? CSS ne peut rien "désactiver". Vous pouvez toujours désactiver l'affichage ou la visibilité et l'utilisation, pointer-events: nonemais pointer-eventsne fonctionne pas sur les versions d'IE qui sont sorties avant IE 11.

si vous voulez vraiment utiliser CSS , utilisez la propriété suivante qui rendra le champ non modifiable.

pointer-events: none;