Como faço para que uma entrada de texto não seja editável?

Então, eu tenho uma entrada de texto

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

Aqui está o meu CSS para ele

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; 

Existe uma configuração ou um truque para isso, eu estava pensando em fazer uma gravadora, mas que tal o estilo? Como os converto e existe um caminho melhor ou esse é o único caminho?

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

Não é necessário estilo.

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

Você pode adicionar o atributo readonlyà entrada:

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

Mais informações: http://www.w3schools.com/tags/att_input_readonly.asp

Você pode usar o readonlyatributo, se desejar que sua entrada seja apenas lida. E você pode usar o disabledatributo, se quiser que a entrada seja mostrada, mas totalmente desabilitada (mesmo linguagens de processamento como PHP não poderão lê-las).

Apenas para completar as respostas disponíveis:

Um elemento de entrada pode ser somente leitura ou desabilitado (nenhum deles é editável, mas há algumas diferenças: foco, ...)

Uma boa explicação pode ser encontrada aqui:
Qual é a diferença entre disabled = "disabled" e readonly = "readonly" para os campos de entrada do formulário HTML?

Como usar:

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

Existem também algumas soluções para fazê-lo através de CSS ou JavaScript, conforme explicado aqui .

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

Você pode ver em https://www.w3schools.com/tags/att_input_readonly.asp

O método para definir "somente leitura":

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

para cancelar "somente leitura" (trabalho em jQuery):

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

adicione o atributo somente leitura

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

ou -

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

nenhum css necessário!

você só precisa adicionar desativado no final

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

Adicionar readonly:

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

Se você deseja que o valor não seja enviado em um formulário, adicione o disabledatributo

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

Não há como usar CSS que sempre funcione para fazer isso.

Por quê? O CSS não pode "desativar" nada. Você ainda pode desativar a exibição ou a visibilidade e o uso, pointer-events: nonemas pointer-eventsnão funciona nas versões do IE lançadas antes do IE 11.

se você realmente deseja usar CSS , use a propriedade a seguir, que tornará o campo não editável.

pointer-events: none;