Chtěl bych změnit CSS pro zdravotně postižené políček v mřížce (jsou příliš těžké pochopit, pro uživatele). Co je to jednoduchý způsob, jak to udělat?
Moje preference v oblasti technologií používá (v sestupném pořadí):
CSS
JavaScript
jQuery
Další
Ive měl štěstí s několika JS knihovnách dělat práci. Dejme tomu můj požadavkem bylo, aby tyto boxy vypadají velmi odlišný od políčko standardní. Následující knihovny je dokonce 508 kompatibilní.
v podstatě, je třeba přiložit onclick událost na div, p, nebo jakéhokoli jiného prvku použitého pro sítě a následně přenést kontrolované hodnoty do skrytého prvku, spojeného s tímto oborem v mřížce. což je velmi triviální, pokud se používá javascript - jQuery zjistit přidat onclick událost na libovolný prvek. pokud na něj kliknete, nastavte hodnotu = 1 pro skryté prvku.
Já bych navrhnout změnu barvy pozadí (dále jen background-colorve tvaru / fieldset), a uvidíme, jestli můžete přijít s lepším kontrastem. (? Nelze zvolit) Pokud chcete jen změnit barvu tělesně postižené políčka můžete zkusit:
input[disabled] {
...
/* CSS here */
...
}
Ale když jsou vypnuté z nějakého důvodu, jistě nemusí být výrazně vidět? Cílem jejich bytí šedě, je, jistě, aby nedošlo k záměně aktivní / aktivní a neaktivní / vypnout tvarových prvků?
input:disabled {}Pracuje na každém prohlížeči, s výjimkou-ho-IE uhodnout. Pro IE, myslím, že budete muset použít některé knihovny JS.
Udržujte políčko povoleno, ale přidejte onfocus=this.blur()do políčka, takže to nemůže být klepli.
Nebo je-li pomocí ASP.NET (jak říkáte ve svém komentáři) ponechat políčko nastaven na povoleno a přidejte následující události Page.Load:
CheckBox1.Attributes.Add("onclick", "return false;");
Máte-li formulář s mix aktivovat a deaktivovat zaškrtávací políčka, které mají osoby se zdravotním postižením políčka vybledla vyhne nejasnostem pro uživatele. V případě, že záměrem je zobrazit stránku pouze prohlížet pomocí zaškrtávacích políček (např. Pro zobrazení možnosti produktu vybraných na dokladu o koupi), pak nahradí vstupní políčko prvky s obrazy mohou poskytnout lepší výsledky.
Nahradit
<input type="checkbox" disabled>
<input type="checkbox" disabled checked>
s
<img src="unchecked.gif">
<img src="checked.gif">
Ve skutečnosti s bitovou CSS3 můžete mock-up velmi zjednodušující řešení. Budete mít vždy zvážit, jaký druh podpory chcete nabídnout. Ale pokud jste v pořádku s ním pracovat na moderních prohlížečích, jen to zkusit.
Zde je HTML
<label>
<input type="checkbox" name="test" />
<span>I accept terms and cons</span><br><br>
<button>Great!</button>
</label>
Tady je CSS
button { display: none}
:checked ~ button {
font-style: italic;
color: green;
display: inherit;
}
A tady je DEMO http://jsfiddle.net/DyjmM/