用于禁用的表单输入的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时(例如按下submit按钮)，它不会像应该的那样灰显。

我在提交按钮HTML中有这个

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

我怎么才能让按钮在点击后变灰呢？

Answer 1

问题是您的样式覆盖了已禁用表单元素的浏览器默认设置。

您需要通过在CSS中指定:disabled伪类来重新定义样式。

这里有一个jsFiddle，展示了它是如何工作的。

Answer 2

在IE中它会变灰。但是，对于其他浏览器，您需要使用以下命令专门定义您的“禁用元素”样式：

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

类似这样的东西(尽管如果有级联问题，您可能必须应用!important )。

Answer 3

input[disabled]{
  styles here
}