De nuevo nos encontramos ante una pregunta muy frecuente entre los nuevos programadores web y más aún entre los nuevos visitantes del blog. La respuesta es muy clara: NO se puede crear un TextBox de sólo lectura o deshabilitado mediante CSS; estas características son propiedades del control, no estilos.

Lo que sí que se puede hacer, es aplicar un estilo concreto a los TextBox que tienen la propiedad disabled o readonly activada. Esto lo vemos en el siguiente ejemplo, en el que asignamos un color de fuente y fondo a los controles deshabilitados y de sólo lectura:

[disabled] { 
    background-color:#0c0; 
    color:#fff; 
} 

[readonly] { 
    background-color:#00c; 
    color:#fff; 
}

Con este código cualquier control que tenga la propiedad disabled activada aparecerá con el color de fondo en verde y los que tengan la propiedad readonly lo tendrán de color azul. Eso sí, en cualquier navegador menos en Internet Explorer.

Para terminar, si lo que queremos es deshabilitar un control programáticamente, tendremos que recurrir a Javascript. Los siguientes fragmentos de código asignan a dos controles HTML que tienen los identificadores inputtext1 y inputext2 las propiedades disabled y readonly respectivamente.

document.getElementById('inputtext1').disabled = true;
document.getElementById('inputtext2').readOnly = true;

o utilizando jQuery:

$('#inputtext1').attr('disabled', true); 
$('#inputtext2').attr('readonly', true);