Non è possibile disabilitare nulla con i CSS, è un problema di funzionalità. I CSS sono pensati per problemi di progettazione. Puoi dare l'impressione che una casella di testo sia disabilitata, impostando su di essa i colori sbiaditi.
Per realtà disabilitare l'elemento, è necessario utilizzare i disabili attributo booleano:
<input type="text" name="lname" disabled />
Demo: http://jsfiddle.net/p6rja/
O, se si desidera, è possibile impostare questo tramite JavaScript:
document.forms['formName']['inputName'].disabled = true;
Demo: http://jsfiddle.net/655Su/
Ricordare che gli input disabilitati non passeranno i loro valori quando si inviano i dati sul server. Se desideri conservare i dati, ma non consentire di modificarli direttamente, potresti essere interessato a impostarlo su readonly.
// Similar to <input value="Read-only" readonly>
document.forms['formName']['inputName'].readOnly = true;
Demo: http://jsfiddle.net/655Su/1/
questo non cambia l'interfaccia utente dell'elemento, quindi si avrebbe bisogno di farlo da soli:
input[readonly] {
background: #CCC;
color: #333;
border: 1px solid #666
}
Si potrebbe anche bersagliare qualsiasi elemento disabilitato:
input[disabled] { /* styles */ }
Si noti che c'è una sottile differenza tra 'readonly' e' disabled'. In entrambi i casi il valore non è modificabile, ma il primo invierà comunque il valore sul lato server, mentre il successivo non lo farà. Anche la versione successiva ha nella maggior parte dei browser web uno stile predefinito diverso (più scuro/ombreggiato). – BalusC