Je voudrais changer le CSS pour handicapés dans les cases d'une grille (ils 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
Autre
Ive a eu bonne chance avec quelques bibliothèques JS pour faire le travail. Certes mon exigence était de rendre les boîtes sont très différentes de la case à cocher standard. La bibliothèque suivante est même 508 conforme.
En gros, 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érifier jquery pour ajouter un événement onclick sur tout élément. si cliqué, régler la valeur = 1 pour l'élément caché.
Je vous suggère de changer la couleur de l'arrière - plan ( background-colorde la forme / fieldset), et voyez si vous pouvez venir avec un meilleur contraste. (? Non sélectionnable) Si vous voulez juste changer la couleur des cases désactivées , vous pouvez essayer:
input[disabled] {
...
/* CSS here */
...
}
Mais si elles sont désactivées pour une raison, sûrement ils ne doivent pas nécessairement être bien visible? Le but de leur être grisées est, sûrement, pour éviter toute confusion entre les éléments de forme active / activé et inactif / désactivé?
input:disabled {}fonctionne pour tous les navigateurs, sauf vous l'aurez deviné-IE. Pour IE, je suppose que vous devrez utiliser une bibliothèque JS.
Gardez la case à cocher est activée, mais ajouter onfocus=this.blur()à la case ne peut donc pas être cliqué.
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;");
Si vous avez une forme avec un mélange de cases activées et désactivées, ayant les cases handicapées en fondu évite la confusion pour l'utilisateur. Si l'intention est d'afficher une page de vue uniquement avec des cases à cocher (ex. Pour afficher les options de produits sélectionnés sur un reçu d'achat) puis en remplaçant les éléments d'entrée des cases à cocher avec des images peuvent rendre de meilleurs résultats.
Remplacer
<input type="checkbox" disabled>
<input type="checkbox" disabled checked>
avec
<img src="unchecked.gif">
<img src="checked.gif">
En fait, avec un peu CSS3, vous pouvez railler une solution très simpliste. Vous aurez toujours de considérer ce genre de soutien que vous souhaitez offrir. Mais si vous êtes bien avec elle travaille sur les navigateurs modernes, juste lui donner un coup.
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/