如何样式禁用复选框？

Question

你知道我可以如何设置复选框的样式吗？

如：

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

Answer 1

使用:disabledCSS3 pseudo-selector

Answer 2

您可以使用CSS像这样选择它：

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

Answer 3

使用CSS的:disabled（对CSS3）选择：

checkbox-style { } 
checkbox-style:disabled { } 

或者你需要使用JavaScript来改变基于何时启用/禁用它的样式（假设它基于你的问题被启用/禁用）。

Answer 4

使用属性选择器中的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 5

复选框（单选按钮和<select>）是操作系统级组件，不浏览器的水平。您无法可靠地在浏览器和操作系统中保持一致的风格。

最好的选择是将顶部和顶部的覆盖层放在顶部而不是顶部。

Answer 6

这是通过IE太支持：

HTML

class="disabled" 

CSS

.disabled{ 
... 
} 

Answer 7

不能直接样式，因为它是由浏览器/ OS控制的禁用复选框。

但是，您可以很聪明，并用一个标签替换复选框，该标签使用纯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 8

input[type='checkbox'][disabled][checked] { 
width:0px; height:0px; 
} 
input[type='checkbox'][disabled][checked]:after { 
content:'\e013'; position:absolute; 
margin-top:-10px; 
opacity: 1 !important; 
margin-left:-5px; 
font-family: 'Glyphicons Halflings'; 
font-style: normal; 
font-weight: normal; 
}