如何设置禁用复选框的样式？

Question

你知道如何禁用复选框的样式吗？

例如:

<input type="checkbox" value="All Terrain Vehicle"
       name="exfilter_All Terrain Vehicle"
       id="exfilter_All_Terrain_Vehicle"
       class="exfilter" disabled="">

Answer 1

在css中使用属性选择器

input[disabled]{
  outline:1px solid red; // or whatever
}

用于复选框专用

input[type=checkbox][disabled]{
  outline:1px solid red; // or whatever
}

http://www.jsfiddle.net/gaby/pxKcR/2/上的示例

Answer 2

您无法直接设置已禁用的复选框,因为它由浏览器/操作系统控制.

但是,您可以很聪明,并使用标签来替换复选框,该标签使用纯CSS模拟复选框.您需要有一个相邻的标签,您可以使用该标签设置新的"伪复选框"样式.基本上你是完全重绘的东西,但它可以让你完全控制它在任何状态下的外观.

我已经抛出了一个基本的例子,以便你可以看到它的实际效果:http://jsfiddle.net/JohnSReid/pr9Lx5th/3/

这是样本:

input[type="checkbox"] {
    display: none;
}

label:before {
    background: linear-gradient(to bottom, #fff 0px, #e6e6e6 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #035f8f;
    height: 36px;
    width: 36px;
    display: block;
    cursor: pointer;
}
input[type="checkbox"] + label:before {
    content: '';
    background: linear-gradient(to bottom, #e6e6e6 0px, #fff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-color: #3d9000;
    color: #96be0a;
    font-size: 38px;
    line-height: 35px;
    text-align: center;
}

input[type="checkbox"]:disabled + label:before {
    border-color: #eee;
    color: #ccc;
    background: linear-gradient(to top, #e6e6e6 0px, #fff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

input[type="checkbox"]:checked + label:before {
    content: '?';
}

<div><input id="cb1" type="checkbox" disabled checked /><label for="cb1"></label></div>
<div><input id="cb2" type="checkbox" disabled /><label for="cb2"></label></div>
<div><input id="cb3" type="checkbox" checked /><label for="cb3"></label></div>
<div><input id="cb4" type="checkbox" /><label for="cb4"></label></div>

根据您的浏览器兼容性和可访问性级别,需要进行一些额外的调整.

Answer 3

使用:disabled CSS3伪选择器

Answer 4

您可以使用这样的css选择它:

input[disabled] { /* css attributes */ }

Answer 5

复选框（单选按钮和<select>）是操作系统级别的组件，而不是浏览器级别的。您无法以跨浏览器和操作系统一致的方式可靠地设置它们的样式。

你最好的选择是在上面放一个覆盖层并设计它的样式。