Comment définir CSS pour les cases à cocher désactivées?

Question

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

Ma préférence pour les technologies utilisées (par ordre décroissant):
CSS
JavaScript
jQuery
Autre

Answer 1

Je suggérerais de changer la couleur de l'arrière-plan (la couleur d'arrière-plan du formulaire / fieldset) et de voir si vous pouvez obtenir un meilleur contraste. Si vous souhaitez simplement changer la couleur des cases à cocher désactivées (non sélectionnables?), Vous pouvez essayer:

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

Mais s'ils sont handicapés pour une raison quelconque, ils n'ont sûrement pas besoin d'être bien visibles? L’objectif de leur affichage grisé est certainement d’éviter toute confusion entre les éléments de formulaire actifs / activés et inactifs / désactivés?

Answer 2

Laissez la case à cocher activée, mais ajoutez ensuite onfocus = this.blur () à la case à cocher pour empêcher tout clic.

Ou, si vous utilisez ASP.net (comme vous le dites dans votre commentaire), laissez la case à cocher activée et ajoutez les éléments suivants à l'événement Page.Load:

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

Answer 3

J'ai eu de la chance avec quelques bibliothèques JS pour faire le travail. Certes, je souhaitais que les cases soient très différentes de la case à cocher standard. La bibliothèque suivante est même conforme à 508.

Contrôles de formulaire stylisés

Answer 4

saisie: désactivé {} 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

En gros, vous devez attacher un événement onclick à div, p ou à tout autre élément utilisé pour une grille, puis transférer la valeur vérifiée dans un élément masqué associé à ce champ dans une grille. ce qui est très trivial, si javascript est utilisé - cochez jquery pour ajouter un événement onclick sur n'importe quel élément. si vous cliquez dessus, définissez valeur = 1 pour l'élément masqué.

Answer 6

En fait, avec un peu de CSS3, vous pouvez simuler une solution très simpliste. Vous devrez toujours déterminer le type de soutien que vous souhaitez offrir. Mais si cela vous convient de fonctionner sur les navigateurs modernes, essayez-le simplement.

Voici le code 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/

Answer 7

Si vous avez un formulaire avec une combinaison de cases à cocher activées et désactivées, le fait de supprimer les cases à cocher désactivées évite toute confusion pour l'utilisateur. Si vous souhaitez afficher une page en lecture seule 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 des cases à cocher par des images peut produire de meilleurs résultats.

Remplacer

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

avec

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