Aș dori schimba CSS pentru casetele de selectare cu handicap într-o grilă (acestea sunt prea greu pentru a vedea pentru utilizatori). Ce este un simplu mod de a face acest lucru?
Preferința mea în tehnologiile utilizate (în ordine descrescătoare):
CSS
JavaScript
jQuery
Alte
Ive a avut noroc cu câteva biblioteci JS pentru a face munca. Acordat cerința mea a fost de a face cutiile arata foarte diferit de caseta standard de. Următoarea bibliotecă este chiar 508 compatibil.
în principiu, trebuie să atașați eveniment onclick pe div, p, sau orice alt element utilizat pentru o grilă și apoi se transferă valoarea verificată în elementul ascuns asociat cu acel câmp într-o grilă. care este foarte banal, în cazul în care se utilizează javascript - verifica jquery pentru a adăuga evenimentul onclick pe orice element. în cazul în care a făcut clic, valoarea = 1 set pentru elementul ascuns.
Aș sugera schimbarea culorii condiții generale ( background-colorde forma / FIELDSET), și vezi dacă poți veni cu un contrast mai bun. (? Nu pot fi selectate) Dacă doriți doar pentru a schimba culoarea de handicap checkbox puteți încerca:
input[disabled] {
...
/* CSS here */
...
}
Dar, dacă acestea sunt dezactivate pentru un motiv, cu siguranță ei nu trebuie să fie vizibil vizibile? Scopul acestora de a fi cu gri este, cu siguranță, pentru a evita confuzia între elementele de formă active / activate și inactive / dezactivat?
input:disabled {}lucrări pentru fiecare browser-ul, cu excepția-ai ghicit-IE. Pentru IE, cred că va trebui să utilizați unele bibliotecă JS.
Păstrați caseta activat, dar apoi adăugați onfocus=this.blur()în caseta astfel încât nu se poate face clic.
Sau, dacă se utilizează ASP.net (așa cum ați spus în comentariu) să păstreze caseta de selectare setată la activată și adăugați următoarele la eveniment Page.Load:
CheckBox1.Attributes.Add("onclick", "return false;");
Dacă aveți o formă cu un amestec de checkbox dezactivat și, având în casetele de persoane cu handicap stins evită confuzia pentru utilizator. În cazul în care intenția este de a afișa o pagină numai vizualizare cu casetele de selectare (ex. Pentru a afișa opțiunile de produse selectate pe o chitanță de achiziție), apoi înlocuirea elementelor de intrare caseta de selectare cu imagini pot face rezultate mai bune.
A inlocui
<input type="checkbox" disabled>
<input type="checkbox" disabled checked>
cu
<img src="unchecked.gif">
<img src="checked.gif">
De fapt, cu un pic CSS3 vă puteți bate joc de o soluție foarte simplistă. Vei avea întotdeauna să ia în considerare ce fel de sprijin pe care doriți să ofere. Dar dacă ești bine cu ea de lucru pe browserele moderne, trebuie doar să dau un du-te.
Iată HTML
<label>
<input type="checkbox" name="test" />
<span>I accept terms and cons</span><br><br>
<button>Great!</button>
</label>
Iată CSS
button { display: none}
:checked ~ button {
font-style: italic;
color: green;
display: inherit;
}
Și aici e DEMO http://jsfiddle.net/DyjmM/