如何设置CSS禁用复选框？

Question

我想更改网格中禁用复选框的 CSS（用户很难看到它们）。有什么简单的方法可以做到这一点？

我对所使用技术的偏好（按降序排列）：
CSS
JavaScript
jQuery
其他

Answer 1

我建议更改背景颜色（表单/字段集的

background-color

），看看是否可以提供更好的对比度。如果您只想更改禁用（不可选择？）复选框的颜色，您可以尝试：

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

但是，如果它们由于某种原因而被禁用，那么它们肯定不需要显眼吗？将它们显示为灰色的目的当然是为了避免活动/启用和非活动/禁用表单元素之间的混淆？

Answer 2

保持复选框处于启用状态，然后将

onfocus=this.blur()

添加到复选框，这样就无法单击它。

或者，如果使用 ASP.net（正如您在评论中所说），请将复选框设置为启用状态，并将以下内容添加到 Page.Load 事件中：

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

Answer 3

我很幸运，使用了一些 JS 库来完成这项工作。当然，我的要求是使这些框看起来与标准复选框非常不同。以下库甚至符合 508 标准。

样式表单控件

Answer 4

input:disabled {}

适用于所有浏览器，除了——你猜对了——IE。对于 IE，我想你必须使用一些 JS 库。

Answer 5

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

Answer 6

实际上，使用一点 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/

Answer 7

Edge 中绿色复选框的解决方案

我想将禁用的复选框设置为绿色，并使其在 Edge 浏览器中工作。我尝试了发布的所有解决方案，但没有一个对我有用，可能是因为 Edge 浏览器会覆盖您为禁用复选框设置的任何样式。我找到了一种解决方法，它与禁用的复选框具有相同的效果/外观。由于 Edge 只允许在启用的复选框上设置样式，因此我删除了禁用属性，将

Accent-color

设置为绿色，然后添加了

onclick

函数，只需将控件设置回选中状态即可。

CSS

input[type="checkbox"] {
    Accent-color: green
}

HTML

<input type='checkbox' checked id="checkbox-1" onclick="keepCheckboxGreen('checkbox-1')">

JavaScript

function keepCheckboxGreen(id) {
    var checkbox = document.getElementById(id);
    checkbox.checked = true;
}

Answer 8

如果您的表单混合了启用和禁用的复选框，则使禁用的复选框淡出可以避免用户感到困惑。如果目的是显示带有复选框的仅供查看的页面（例如，显示购买收据上选择的产品选项），那么用图像替换复选框输入元素可能会呈现更好的结果。

更换

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

与

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