如何樣式禁用複選框？

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; 
}