Вы не можете ничего отключить с помощью CSS, это функциональная проблема. CSS предназначен для дизайна. Вы можете создать впечатление, что текстовое поле отключено, установив на него размытые цвета.
Чтобы фактически отключить элемент, вы должны использовать отключенный логический атрибут:
<input type="text" name="lname" disabled />
Демо: http://jsfiddle.net/p6rja/
Или, если хотите, вы можете установить это через JavaScript:
document.forms['formName']['inputName'].disabled = true;
Демо: http://jsfiddle.net/655Su/
Имейте в виду, что отключенные входы не будут передавать свои значения при отправке данных обратно на сервер. Если вы хотите сохранить данные, но не можете напрямую их редактировать, вам может быть интересно установить вместо этого значение readonly.
// Similar to <input value="Read-only" readonly>
document.forms['formName']['inputName'].readOnly = true;
Демо: http://jsfiddle.net/655Su/1/
Это не меняет пользовательский интерфейс элемента, поэтому вам нужно сделать это самостоятельно:
input[readonly] {
background: #CCC;
color: #333;
border: 1px solid #666
}
Вы также можете выбрать любой отключенный элемент:
input[disabled] { /* styles */ }