Comment styliser une case à cocher désactivée?

Question

Savez-vous comment je pourrais cocher une case quand elle est désactivée?

Par exemple:

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

Answer 1

Utilisez le :disabledCSS3 pseudo-selector

Answer 2

Vous pouvez le sélectionner en utilisant css comme ceci:

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

Answer 3

Utilisez le sélecteur :disabled de CSS (CSS3):

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

Vous devez également utiliser javascript pour modifier le style en fonction du moment où vous l'activez/le désactivez (en supposant qu'il soit activé/désactivé en fonction de votre question).

Answer 4

utiliser le sélecteur d'attribut dans le css

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

de case à cocher utiliser exclusivement

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

exemple à http://www.jsfiddle.net/gaby/pxKcR/2/

Answer 5

Checkboxes (boutons radio et <select>) sont des composants au niveau du système d'exploitation, ne au niveau du navigateur. Vous ne pouvez pas les styliser de manière fiable d'une manière qui sera cohérente entre les navigateurs et les systèmes d'exploitation.

Votre meilleur pari pour mettre une superposition sur le dessus et le style qui à la place.

Answer 6

Ceci est soutenu par IE aussi:

HTML

class="disabled" 

CSS

.disabled{ 
... 
} 

Answer 7

Vous ne pouvez pas le style d'une case non cochée directement parce qu'il est contrôlé par le navigateur/OS.

Cependant, vous pouvez être intelligent et remplacer la case à cocher par une étiquette qui simule une case à cocher en utilisant du CSS pur. Vous devez avoir une étiquette adjacente que vous pouvez utiliser pour créer une nouvelle "pseudo case à cocher". Essentiellement, vous êtes en train de redessiner complètement la chose, mais cela vous donne un contrôle total sur son apparence dans n'importe quel état.

J'ai jeté un exemple de base de sorte que vous pouvez le voir en action: http://jsfiddle.net/JohnSReid/pr9Lx5th/3/

voici l'exemple:

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>

En fonction de votre niveau de compatibilité du navigateur et l'accessibilité, quelques ajustements supplémentaires devront être faits.

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