Come impostare i CSS per caselle disabili?

voti
6

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

È pubblicato 30/07/2009 alle 15:27
fonte dall'utente
In altre lingue...                            


7 risposte

voti
3

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.

Controlli modulo stile

Risposto il 30/07/2009 a 15:30
fonte dall'utente

voti
0

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.

Risposto il 30/07/2009 a 15:34
fonte dall'utente

voti
8

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?

Risposto il 30/07/2009 a 15:35
fonte dall'utente

voti
2

input:disabled {}funziona per tutti i browser tranne-avete indovinato-IE. Per IE, immagino che dovrete usare qualche libreria JS.

Risposto il 30/07/2009 a 16:40
fonte dall'utente

voti
4

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;");
Risposto il 09/04/2011 a 01:47
fonte dall'utente

voti
0

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">
Risposto il 29/07/2013 a 03:30
fonte dall'utente

voti
0

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/

Risposto il 14/08/2013 a 14:15
fonte dall'utente

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more