任何使HTML禁用复选框更暗的方法？

Question

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

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

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

来做到这一点

Answer 1

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

你可以做的事情是禁用复选框更透明：

  select[disabled] { opacity: .5 }

这适用于IE＆gt; = 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;
}