Comment faire pour CSS case à cocher désactivé?

Question

Je voudrais changer les cases CSS pour les cases désactivées dans une grille (elles sont trop difficiles à voir pour les utilisateurs). Qu'est-ce qu'un moyen simple de faire cela?

Ma préférence dans les technologies utilisées (par ordre décroissant): CSS

JavaScript
jQuery
Autres

Answer 1

Je suggère de changer la couleur de l'arrière-plan (le background-color de la forme/fieldset), et voyez si vous pouvez obtenir un meilleur contraste. Si vous voulez juste changer la couleur des cases handicapés (?) Non sélectionnables, vous pouvez essayer:

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

Mais si elles sont désactivées pour une raison, sûrement ils ne ont pas besoin d'être bien visible? Le but de leur mise en sourdine est, bien sûr, d'éviter la confusion entre les éléments de formulaire actifs/activés et inactifs/désactivés?

Answer 2

Ive a eu bonne chance avec quelques bibliothèques JS pour faire le travail. Accordé mon exigence était de faire les boîtes semblent très différentes de la case à cocher standard. La bibliothèque suivante est même conforme à la norme 508.

Styled Form Controls

Answer 3

essentiellement, vous devez joindre l'événement onclick sur div, p, ou tout autre élément utilisé pour une grille, puis transférer la valeur dans l'élément caché contrôlé associé à ce champ dans une grille. ce qui est très trivial, si javascript est utilisé - vérifiez jquery pour ajouter l'événement onclick sur n'importe quel élément. si vous cliquez dessus, définissez la valeur = 1 pour l'élément caché.

Answer 4

input:disabled {} fonctionne pour tous les navigateurs sauf-vous l'avez deviné-IE. Pour IE, je suppose que vous devrez utiliser une bibliothèque JS.

Answer 5

Cochez cette case, puis ajoutez onfocus=this.blur() à la case à cocher afin de ne pas pouvoir cliquer dessus.

Ou si vous utilisez ASP.net (comme vous le dites dans votre commentaire) garder la case à cocher est défini sur activé et ajouter ce qui suit à l'événement Page.Load:

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

Answer 6

Si vous avez une forme avec un mélange des cases à cocher activées et désactivées, la désactivation des cases à cocher désactivées évite la confusion pour l'utilisateur. Si l'intention est d'afficher une page d'affichage uniquement avec des cases à cocher (par exemple, pour afficher les options de produit sélectionnées sur un reçu d'achat), le remplacement des éléments d'entrée de case à cocher par des images peut donner de meilleurs résultats.

Remplacer

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

avec

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

Answer 7

En fait, avec un peu CSS3, vous pouvez railler une solution très simpliste. Vous devrez toujours réfléchir au type de support que vous souhaitez offrir. Mais si ça vous va bien de travailler sur des navigateurs modernes, essayez-le.

Voici le HTML

<label> 
    <input type="checkbox" name="test" /> 
    <span>I accept terms and cons</span><br><br> 
    <button>Great!</button> 
</label> 

Voici le CSS

button { display: none} 
:checked ~ button { 
    font-style: italic; 
    color: green; 
    display: inherit; 
} 

Et voici la démo http://jsfiddle.net/DyjmM/