Cum se setează CSS pentru casetele de selectare cu handicap?

voturi
6

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

Întrebat 30/07/2009 la 15:27
sursa de către utilizator
În alte limbi...                            


7 răspunsuri

voturi
3

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.

Controale Form styled

Publicat 30/07/2009 la 15:30
sursa de către utilizator

voturi
0

î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.

Publicat 30/07/2009 la 15:34
sursa de către utilizator

voturi
8

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?

Publicat 30/07/2009 la 15:35
sursa de către utilizator

voturi
2

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.

Publicat 30/07/2009 la 16:40
sursa de către utilizator

voturi
4

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;");
Publicat 09/04/2011 la 01:47
sursa de către utilizator

voturi
0

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">
Publicat 29/07/2013 la 03:30
sursa de către utilizator

voturi
0

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/

Publicat 14/08/2013 la 14:15
sursa de către utilizator

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