J'aimerais changer le CSS pour les cases à cocher handicapés dans une grille (elles sont trop difficiles à voir pour les utilisateurs). Quel est un moyen simple de faire cela?
Ma préférence dans les technologies utilisées (en ordre décroissant):
CSS
JavaScript
JQuery
Autre
7 Réponses :
ive avait bonne chance avec quelques bibliothèques JS pour faire le travail. Accordé à mon exigence était de rendre les cases très différentes de la case à cocher standard. La bibliothèque suivante est même conforme à 508.
Fondamentalement, vous devez fixer l'événement OnClick sur DIV, P ou tout autre élément utilisé pour une grille, puis transférer la valeur vérifiée dans un élément caché associé à ce champ dans une grille. Ce qui est très trivial, si JavaScript est utilisé - Vérifiez JQuery pour ajouter ONCLICK Event sur n'importe quel élément. Si cliqué sur, définissez la valeur = 1 pour l'élément caché.
Je suggère de changer la couleur de l'arrière-plan (le de fond de fond code> du formulaire / champique), et voyez si vous pouvez trouver un meilleur contraste. Si vous voulez simplement modifier la couleur des cases à cocher de la couleur (non sélectionnable?) Vous pouvez essayer: input[disabled] {
...
/* CSS here */
...
}
Nous ne pouvions pas faire cela dans CSS, car notre base d'utilisateurs utilise IE. Nous l'avons fait de manière programmatique sur la case à cocher Contrôles dans .NET.
@Even Mien: Ce serait bien si vous avez dit comment vous l'avez fait, c'est-à-dire quel attribut vous avez défini.
@Christopher Voir ma réponse ci-dessous pour le code ASP.NET pour le faire.
Je crois que la manière la plus correcte est l'entrée [désactivée = "désactivée"] {}
@Duncan: dans xhtml, oui; Mais en HTML, je suis toujours tort ... soupir. Deux minutes, et je vais éditer. = / La simple présence de l'attribut est suffisante (car sa présence est suffisante, dans la plupart des cas, pour représenter l'élément étant désactivé). Merci pour la prise, cependant; Je n'aurais jamais revenu à cela, n'avez-vous pas été commenté. :)
@DavidsaysRinStaTemonica: "Mais s'ils sont désactivés pour une raison, ils n'ont sûrement pas besoin d'être en importance visible?" Lorsque vous souhaitez donner à l'utilisateur un sentiment d'avancement de l'achèvement des tâches où l'achèvement de la tâche implique une autre chose que l'utilisateur vérifiant manuellement la case et lorsque vous souhaitez effectuer cela à l'aide de la liaison de valeur à un objet d'état avec un objet JavaScript Cadre, il semble être un temps valide pour pouvoir personnaliser le look de la case à cocher Désactivé. De toute évidence, il y a d'autres moyens d'accomplir cela, mais j'aime l'idée d'utiliser l'entrée de contrôle.
entrée: désactivé {} fonctionne pour chaque navigateur sauf, vous l'avez deviné-c.-à-d. Pour IE, je suppose que vous devrez utiliser une bibliothèque JS.
Oui, j'ai certainement besoin d'étant donné que c'est 100% de ma base d'utilisateurs.
Conservez la case à cocher activée, mais ajoutez ou si vous dites dans votre commentaire ) Gardez la case à cocher définie sur Activé et ajoutez les éléments suivants à l'événement de page.load: P> oncocus = this.blur () code> à la case de cocher afin qu'il ne puisse pas être cliqué sur. CheckBox1.Attributes.Add("onclick", "return false;");
@Blue acier: selon la question, l'utilisateur a demandé la solution CSS - "Comment définir CSS pour les cases à cocher handicapées?"
@It PPL: Il a changé ses exigences dans un commentaire ci-dessus, indiquant qu'il ne pouvait pas utiliser CSS mais qu'il fallait le faire par programme. Il mentionne également qu'il utilise une case à cocher ASP.NET.
Je suis content que vous ayez réussi à répondre d'une certaine manière après si longtemps.
@It ppl: haha! Je viens de recevoir une notification par courrier électronique sur votre commentaire hier! Il semble que le système de notification a mal fonctionné ou quelque chose.
Si vous avez un formulaire avec un mélange de cases à cocher activées et désactivées, les cases à cocher désactivées disparaissent évite la confusion pour l'utilisateur. Si l'intention est d'afficher une page de visualisation uniquement avec des cases à cocher (ex. Pour afficher les options de produit sélectionnées sur un reçu d'achat), remplacez les éléments d'entrée de la case à cocher avec des images peuvent rendre de meilleurs résultats.
Remplacer P>
<img src="unchecked.gif"> <img src="checked.gif">
En fait avec un peu CSS3, vous pouvez vous maigrir une solution très simpliste. Vous devrez toujours envisager le type de soutien que vous souhaitez offrir. Mais si vous voulez bien travailler sur les navigateurs modernes, donnez-lui simplement une go.
Voici le HTML P>
button { display: none}
:checked ~ button {
font-style: italic;
color: green;
display: inherit;
}
Bien que ce soit vraiment cool, ce n'est pas pertinent pour la question ici. Il demandait comment changer la case à cocher Envoyer des personnes handicapées et ce message ne résout pas celui du tout.
C'est très gentil de votre part!
S'il vous plaît soyez plus descriptif, avez-vous besoin de solution JavaScript?