CSS для отключенного ввода формы

Question

У меня есть это в моем файле CSS, который стилизует поля ввода в форме:

input,textarea,input,select,input,checkbox {
    font-size:12px;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    color:#98925C;
    background-color:#000;
    border:1px solid #413E22;
}

Когда я использую disabled в форме, хотя (например, кнопка отправки при нажатии), она не выделяется серым цветом, как следует.

У меня есть это в кнопке отправки HTML

onclick="this.disabled=true;this.value=' done ';this.form.submit();"

Как мне сделать так, чтобы кнопка отключалась после нажатия?

Answer 1

Это делает серым в IE. Для других браузеров, однако, вам нужно специально определить стили "отключенного элемента" с помощью:

:disabled {
    color: #6b849a;
    text-shadow: 1px 1px #ffffff;
    cursor: default;
}

Что-то в этом роде (хотя вам, возможно, придется применить !important, если есть проблемы с каскадированием).

Answer 2

input[disabled]{
  styles here
}

Answer 3

Проблема в том, что ваши стили переопределяют настройки браузера по умолчанию для отключенного элемента формы.

Вам нужно переопределить стили, указав :disabled псевдокласс в вашем CSS.

Вот jsFiddle , который показывает, как это работает.

Answer 4

Используйте псевдокласс :disabled . Это может не работать в старых браузерах и, конечно, не будет работать в IE, поэтому вы также можете добавить к форме нормальный класс при его отключении.