禁用表單輸入的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

問題是您的樣式將覆蓋禁用表單元素的瀏覽器默認值。

您需要通過在CSS中指定:disabled偽類來重新定義樣式。

這是一個顯示其工作方式的jsFiddle 。

Answer 3

input[disabled]{
  styles here
}

Answer 4

使用:disabled偽類 。 這可能無法在較舊的瀏覽器中運行，並且肯定無法在IE中運行，因此您也可以在禁用該表單時向該表單添加一個普通類。