Štylujeme checkboxy

Reaguji na jefitta44:
Proč to potřebuješ? Já bych řekl, že tvůj návštěvník potřebuje spíš pravý opak.

„dá sa to nejako obísť?“
Dá se nahradit nějakou obrázkovou napodobeninou.

Od Exploreru 9 funguje toto: Pokročilé stylování checkboxu

jefitto44:

prečo vlastne na checkboxy nefunguje normálne css?

Čistě proto, že za vykreslování formulářových prvků je často odpovědný operační systém, nikoliv prohlížeč.

Reakce na Plaváčka:
„Čistě proto, že za vykreslování formulářových prvků je často odpovědný operační systém, nikoliv prohlížeč.“
Jelikož ve stejném operačním systému má Explorer, Firefox i Chrome různý styl checkboxů, nezdá se mi, že by to měl být ten důvod.


Reakce na jefitta44:
„ja by som skorej potreboval iba zmeniť pozadie checkboxu, teda aby nebolo biele, ale šedé... no a okraje zaobliť...“
Obávám se, že to skutečně jednoduše nepůjde.

Příčina, proč to nefunguje, je nejspíš v tom, že ve specifikaci není* jasně řečeno, co má prohlížeč s CSS styly u checkboxu dělat, a tvůrci dnešních prohlížečů nemají odvahu to udělat po svém. Třeba v Opeře 12 je možné checkbox vcelku dostatečně stylovat. Ve starších IE to jde také.

Východiskem by mohla být CSS vlastnost appearance, ale funguje k potřebnému účelu, pokud je mi známo, jen ve Webkitu s prefixem (-webkit-appearance: none – potom jde ve Webkitu checkbox stylovat).

*) Nebo je jen krátký čas, že nebyl čas na implementaci.

Str4wberry:

„Jelikož ve stejném operačním systému má Explorer, Firefox i Chrome různý styl checkboxů, nezdá se mi, že by to měl být ten důvod.“

Já myslím, že ano. Když podrobněji prozkoumáš výchozí stylopisy, které prohlížeče používají (u IE to asi nepůjde), zjistíš, že ovlivňují jen ty vlastnosti, které jim daný operační systém povolí. Jednotlivé prvky tedy vypadají mírně odlišně, ale nesnaží se stylovat vlastnosti, které prostě přespat nejdou.

Většinou je fakt lepší do výchozích vlastností nesahat a nechat prohlížeč, ať si poradí po svém. Nebo využít to, co dělá spousta moderních webdesignerů. Přeplácnout prvek obrázkem, nejlépe za pomoci jQuery. :)

Jo, abych nezapomněl, zajímavý odkaz: http://formalize.me/

Nahradenie formulárového prvku „atrapou“ mi viac vadí pri prvku Select. Napríklad „rozšírené vyhľadávanie“ Google: www.google.sk/advanced_search?hl=sk&fg=1. Pri náhradách Selectu márne stláčam písmená na klávesnici pre rýchlejšie prejdenie k položke, klávesy PgDn a PgUp tiež nefungujú...

_es:

Dobrý postřeh.

Reakce na Plaváčka:
To se mi nezdá. V Opeře 12 si můžu s checkboxem dělat skoro cokoliv. Ve Webkitu po nastavení -webkit-appearance: none taktéž. Očividně to tedy přepsat jde, tedy operační systém změny vzhledu povoluje.

Že je někdy lepší formulářové prvky nestylovat nebo používat atrapy, s tím souhlasím. Řešíme tu ale otázku, proč to některé prohlížeče neumožňují… A zdůvodnění omezeními OS mi přijde jako nepravdivé.


Reakce na _es:
„Nahradenie formulárového prvku ‚atrapou‘ mi viac vadí pri prvku Select.“
Atrapa vadí skoro vždy, kdy se nechová jako výchozí prvek. Není to ale vina atrapy, ale toho, že ji někdo nedostatečně doplnil chování výchozího prvku.

Str4wberry:
„někdo nedostatečně doplnil chování výchozího prvku.“
No len či sa dá pre všetky prehliadače „doplniť chovanie“ cez JS tak, aby sa od východzieho prvku neodlišovalo. Dosť o tom pochybujem, treba uvažovať klávesnicu, kde sú rôzne nekompatibility, myš, niektoré zariadenia sa ovládajú dotykom... Okrem toho, v niektorých prehliadačoch sa (možno, neviem) môžu formulárové prvky ovládať odlišne a jednotné chovanie cez JS by to narušilo. Keď už sa prvok nahrádza atrapou, tak by to malo dať nejakú „pridanú hodnotu“ - aké zlepšenie pre hľadajúceho dávajú „atrapy selectu“ v spomínanom vyhľadávaní Google? Ja som pocítil len negatíva.

Ano na uvedené stránce je skutečně přínos z atrapy záporný.

Ale pokud funguje ovládání klávesami a vyhledávání podle písmen, tak mi přijde atrapa s originálem téměř vyrovnaná. A lepší vzhled, ikony nebo třeba fuzzy search ji posunou daleko před originál.

Reaguji na Str4wberryho:
„Není to ale vina atrapy, ale toho, že ji někdo nedostatečně doplnil chování výchozího prvku.“
Vzhledem k tomu, že se výchozí prvek může chovat všelijak v závislosti na systému, je pro tvůrce atrapy skoro nemožné stoprocentně napodobit chování originálu. Zrovna u <select>u může být výchozí chování velmi rozmanité, když uvážíme i telefony a tablety. Zaškrtávátka zase můžou reagovat odlišně na dvojklik, nebo na držení mezery, když mají fokus.

„Jelikož ve stejném operačním systému má Explorer, Firefox i Chrome různý styl checkboxů, nezdá se mi, že by to měl být ten důvod.“
Pro tohle je zase důvodem stupidní obchodní politika — Microsoft i Google se pokoušejí násilím protlačit svoje ovládací prvky i tam, kde jsou cizí. Takže Explorer 10+ vypadá všude jako Windows 8 a Chrome vypadá všude jako Chrome OS (až na posuvníky, kterým po vlně uživatelského odporu dodělali zpátky tlačítka se šipkami). Takže nemají systémový vzhled, ale svůj vydupaný, a umožnit nějaké pohodlné (a nedejbože jednotné) pozměňování této válečné výzbroje jednoduše není v jejich zájmu.

Když si představím třeba vystínované zaškrtávátko z Windowsu XP, tak si nedovedu představit, jak by se na něj měl aplikovat border-radius nebo background-color. Vizuální styl systému (nebo prohlížeče) by musel s takovou variabilitou počítat. Windows počínaje Vistou počítá jen se zvětšováním, pokud vím. Bylo by zřejmě složité vymyslet úpravy vzhledu úplně universálně (i když tedy prvky ala Windows 8 jsou extrémně jednoduché, tam by to šlo) a jediný přínos by byl v tom, že si uživatel na stránce při pohledu na checkbox pomyslí „jé, to je to radio krásné“… :-)

Reakce na Chamurappiho:
„je pro tvůrce atrapy skoro nemožné stoprocentně napodobit chování originálu“
Ano, pokud funkčnost atrapy nebude upravená pro různé prohlížeče zvlášť, tak skutečně 100% nebude. Ale i to trochu odlišné chování nebude pro většinu návštěvníků problém. Nebudou-li chybět ty nejzákladnější věcí jako ovládání klávesami.

„pozměňování této válečné výzbroje jednoduše není v jejich zájmu“
Spíš bych řekl, že půjde o to vymýšlení, jak se má válečná výzbroj měnit po aplikaci uživatelských CSS. Kdyby to nebylo v jejich zájmu, tak by asi -webkit-appearance neexistovalo.

Str4wberry:
„Nebudou-li chybět ty nejzákladnější věcí jako ovládání klávesami.“
Nejlepší to bude u selectu s více možnostmi. Jedno vybrání několika možností může vypadat i takto: písmeno Č, PgDown, Shift + Home, Ctrl + End, šipka nahoru, Ctrl + mezerník, Ctrl + tažení myší, Scroll myší, Ctrl + Shift + klik myší.

Žádnou náhražku plnohodnotně podporující klávesnici a myš podle originálu jsem ještě neviděl. Použití polofunkční náhražky považuji za uživatelsky omezující a tedy nevhodné.

Reaguji na jefitta44:
„Vyriešil som to pomocou stack overflow...“
Užitečná informace. Proč jsi nedal odkaz?

„bol tam použitý pseudoiselector :checked“
Jinými slovy tak, jak ti poradil Str4wberry v příspěvku [#4]? (včetně zmíněné nevýhody)


Reaguji na Str4wberryho:
„Ale i to trochu odlišné chování nebude pro většinu návštěvníků problém.“
Ta většina bude velmi pravděpodobně menší než u standardního prvku. Je otázka, zda je odlišný vzhled tak úžasný a lákavý, aby vykompenzoval tuto ztrátu. Myslím, že většinou ne…
(O prvcích, které nějakým způsobem přesahují možnosti systémových ekvivalentů a jsou opravdu užitečnější, nejen krásnější, se teď nebavím.)

„Kdyby to nebylo v jejich zájmu, tak by asi -webkit-appearance neexistovalo.“
Hlavním účelem vlastnosti appearance naopak bylo, aby šlo jiným prvkům nastavit výchozí systémový vzhled, přesněji řečeno abys mohl v libovolném XML dosáhnout téhož, co jde vyrobit v HTML (nebo i víc: napodobit taby, popup menu, bublinové nápovědy). Hodnota none byla jen do počtu, aby šlo obnovit výchozí stav (podobně jako existuje border-collapse: separate). Momentálně už appearance ve specifikacích neexistuje.

Trejpa:
Na druhou stranu... Kdy jsi naposledy viděl někoho použít select s výběrem více možnosti? Pro něco takového se dnes obvykle používají checkboxy (když jde jen o pár položek), nebo nějaký "tagovací" systém jako má třeba facebook pro přidávání lajků do různých kategorií - napíšeš kousek názvu, a on se ti našeptá. A takhle jich přidáš kolik chceš.

Domnívám se že nejsložitější na napodobení by byl plnohodnotný (klasický) select, a to je rozhodně docela dobře proveditelné.

Amunak:
„Kdy jsi naposledy viděl někoho použít select s výběrem více možnosti?“
V práci v informačním systému, využívám každý den.

Pravá výzva při napodobování funkčnosti selectu s více možnostmi nastane při negaci již vybraného.