javascript - 有什么方法可以使禁用 HTML 的复选框变暗？

Question

我正在使用 javascript 禁用复选框：

       $('#test').attr("disabled", "true");

但我想让禁用复选框的背景更暗，因为很难说它被禁用了。有没有办法使用 HTML/CSS/JS>

Answer 1

不容易。复选框的呈现方式由浏览器决定。您必须将其替换为基于 JavaScritpt 的自定义解决方案才能为其提供自定义呈现，但这会带来其他问题。

您可以做的是使禁用的复选框更加透明：

  select[disabled] { opacity: .5 }

这适用于 IE >= 9 和所有其他主要浏览器。

Answer 2

您可以尝试将复选框包装在容器中div，并使用input:disabled如下 CSS 规则：jsFiddle example。

我已经在最新的 Windows 版本的 Internet Explorer、Firefox、Chrome、Opera 和 Safari 中对此进行了测试。

Answer 3

您可以为禁用的输入表单元素指定 CSS 样式，如下所示：

input[disabled]{
 color:#666 !important; // Whatever styling here...
 opacity: .3;
}