如何设置禁用复选框的CSS?

我建议改变背景颜色 background-color 形式/字段集),看看您是否能想出更好的对比度。如果您只想更改禁用的颜色(不可选?)您可以尝试的复选框:

input[disabled] {
...
/* CSS here */
...
}

但是,如果他们因故残疾,他们肯定不需要被显著地看到?它们变灰的目的当然是为了避免活动/启用和非活动/禁用表单元素之间的混淆?

启用复选框,然后添加 onfocus=this.blur() 以使其无法单击。

或者,如果使用ASP.NET(如您在注释中所说),请将复选框设置为“启用”,并将以下内容添加到page.load事件:

CheckBox1.Attributes.Add("onclick", "return false;");

我和几个JS库有幸完成了这项工作。当然,我的要求是让这些复选框看起来与标准复选框非常不同。以下库甚至符合508。

Styled Form Controls

input:disabled {} 适用于除_以外的所有浏览器,你猜是_,也就是说,对于IE,我猜你必须使用一些JS库。

基本上,您需要在DIV、P或网格中使用的任何其他元素上附加onclick事件,然后将选中的值转移到网格中与该字段关联的隐藏元素中。这是非常简单的,如果使用javascript——检查jquery以在任何元素上添加onclick事件。如果单击,则为隐藏元素设置值=1。

如果您有一个混合了启用和禁用复选框的表单,则使禁用的复选框淡出可以避免用户混淆。如果目的是用复选框(例如,在采购收据上显示选中的产品选项)显示“仅查看”页面,则用图像替换复选框输入元素可能会获得更好的结果。

替换

<input type="checkbox" disabled>
<input type="checkbox" disabled checked>

具有

<img src="unchecked.gif">
<img src="checked.gif">

实际上,有了一点CSS3,您就可以模拟出一个非常简单的解决方案。 你总是需要考虑你想要提供什么样的支持。 但是,如果你对它在现代浏览器上的工作感到满意,那就试试吧。

这里是HTML

<label>
    <input type="checkbox" name="test" />
    <span>I accept terms and cons</span><br><br>
    <button>Great!</button>
</label>

这里是CSS

button { display: none}
:checked ~ button {
    font-style: italic;
    color: green;  
    display: inherit;
}

这是演示 http://jsfiddle.net/DyjmM/