Jeg vil gjerne endre CSS for funksjonshemmede boksene i et rutenett (de er for vanskelig å se for brukerne). Hva er en enkel måte å gjøre dette?
Min preferanse i teknologier som brukes (i synkende rekkefølge):
CSS
Javascript
jQuery
Andre
Hvordan sette CSS for funksjonshemmede boksene?
stemmer
6
7 svar
stemmer 3
3
Ive hatt flaks med noen JS biblioteker for å gjøre jobben. Gitt min kravet var å lage kassene ser veldig forskjellig fra standard boksen. Følgende biblioteket er selv 508 kompatibel.
stemmer 0
0
I utgangspunktet må man for å feste onclick arrangementet på div, p, eller hvilket som helst annet element som brukes for et gitter og overfører deretter sjekket verdien til skjult element i forbindelse med det felt i et rutenett. som er veldig trivielt, hvis javascript er brukt - sjekk jquery å legge onclick event på noe element. hvis klikket, sett verdi = 1 for skjult element.
stemmer 8
8
Jeg vil foreslå å endre fargen på bakgrunnen (den background-colorav skjemaet / fieldset), og se om du kan komme opp med en bedre kontrast. (? Ikke-valgbar) Hvis du bare ønsker å endre fargen på funksjonshemmede boksene kan du prøve:
input[disabled] {
...
/* CSS here */
...
}
Men hvis de er deaktivert for en grunn, sikkert de trenger ikke å være tydelig synlig? Målet for deres blir grått ut er sikkert, for å unngå forveksling mellom aktiv / aktivert og inaktive / deaktivert form elementer?
stemmer 2
2
input:disabled {}fungerer for alle nettlesere bortsett-du gjettet det-IE. For IE, tror jeg du må bruke noen JS biblioteket.
stemmer 4
4
Hold boksen er aktivert, men deretter legge onfocus=this.blur()til boksen slik at den ikke kan klikkes.
Eller hvis du bruker ASP.net (som du sier i kommentaren) holder boksen satt til aktivert og legge til følgende i Page.Load hendelsen:
CheckBox1.Attributes.Add("onclick", "return false;");
stemmer 0
0
Hvis du har et skjema med en blanding av aktiveres og deaktiveres boksene, har funksjonshemmede boksene falmet ut unngår forvirring for brukeren. Hvis hensikten er å vise en utsikt kun side med boksene (ex. Vise produkt alternativene som er valgt på en kvittering) og deretter erstatte boksen inngangs elementer med bilder, kan gjøre bedre resultater.
Erstatte
<input type="checkbox" disabled>
<input type="checkbox" disabled checked>
med
<img src="unchecked.gif">
<img src="checked.gif">
stemmer 0
0
Egentlig med litt CSS3 kan du spotte opp en svært forenklede løsning. Du vil alltid måtte vurdere hva slags støtte du ønsker å tilby. Men hvis du er fint med det å jobbe på moderne nettlesere, bare gi det en sjanse.
Her er HTML
<label>
<input type="checkbox" name="test" />
<span>I accept terms and cons</span><br><br>
<button>Great!</button>
</label>
Her er CSS
button { display: none}
:checked ~ button {
font-style: italic;
color: green;
display: inherit;
}
Og her er det DEMO http://jsfiddle.net/DyjmM/