Mi piacerebbe cambiare il CSS per caselle di controllo con disabilità in una griglia (sono troppo difficili da vedere per gli utenti). Che è un modo semplice per fare questo?
La mia preferenza nelle tecnologie utilizzate (in ordine decrescente):
CSS
JavaScript
jQuery
Altro
Ive ha avuto buona fortuna con alcune librerie JS per fare il lavoro. Certo la mia esigenza era di rendere le caselle di aspetto molto diverso dalla casella di controllo standard. Il seguente biblioteca è anche 508 compliant.
In sostanza, è necessario collegare evento onclick su div, p, o qualsiasi altro elemento utilizzato per una griglia e poi trasferire il valore controllato in elemento nascosto associato a tale campo in una griglia. che è molto banale, se javascript è usato - controllare jQuery per aggiungere evento onclick su qualsiasi elemento. se cliccato, value = 1 impostato per elemento nascosto.
Io suggerirei di cambiare il colore dello sfondo (la background-colordella forma / fieldset), e vedere se si può trovare con un contrasto migliore. (? Non selezionabile) Se si vuole solo cambiare il colore del disabile caselle si può provare:
input[disabled] {
...
/* CSS here */
...
}
Ma se sono disabilitate per un motivo, di certo non hanno bisogno di essere ben visibile? L'obiettivo per loro essere in grigio è, certamente, per evitare confusione tra gli elementi dei moduli attivi / abilitato e inattive / disabilitato?
input:disabled {}funziona per tutti i browser tranne-avete indovinato-IE. Per IE, immagino che dovrete usare qualche libreria JS.
Mantenere la casella di controllo attivato, ma quindi aggiungere onfocus=this.blur()alla casella di controllo in modo che non può essere cliccato.
Oppure, se si utilizza ASP.net (come dici nel tuo commento) mantenere la casella di controllo impostata su abilitato e aggiungere il seguente all'evento Page.Load:
CheckBox1.Attributes.Add("onclick", "return false;");
Se si dispone di un modulo con un mix di caselle di controllo abilitati e disabili, con le caselle disabili sbiadito fuori evita la confusione per l'utente. Se l'intenzione è quella di visualizzare una pagina sola visualizzazione con caselle di controllo (es. Per visualizzare le opzioni di prodotto selezionate su una ricevuta d'acquisto) quindi sostituire elementi di input casella di controllo con immagini può rendere migliori risultati.
Sostituire
<input type="checkbox" disabled>
<input type="checkbox" disabled checked>
con
<img src="unchecked.gif">
<img src="checked.gif">
In realtà con un po 'CSS3 si può prendere in giro una soluzione molto semplicistica. Avrete sempre considerare che tipo di supporto che si desidera offrire. Ma se si sta bene con esso lavorare su browser moderni, basta dare un andare.
Ecco il codice HTML
<label>
<input type="checkbox" name="test" />
<span>I accept terms and cons</span><br><br>
<button>Great!</button>
</label>
Ecco il CSS
button { display: none}
:checked ~ button {
font-style: italic;
color: green;
display: inherit;
}
Ed ecco la DEMO http://jsfiddle.net/DyjmM/