Stylování formulářových prvků

Nejprve je dobré si uvědomit, že pokud se formuláře nechají víceméně úplně být, dostanou relativně funkční vzhled od prohlížeče / operačního systému.

Třeba takové tlačítko (<input type=submit> nebo <button>) má při ponechání výchozího vzhledu klidně 5 stavů (obrázky jsou z Google Chrome v OS Windows 7):

  1. Výchozí stav, kdy se nic neděje.
  2. Při najetí myší na tlačítko (:hover).
  3. Při stlačení tlačítka (:active).
  4. Pokud je tlačítko vybráno (typicky) klávesou Tab (:focus).
  5. Tlačítko je zablokované (atribut disabled).

Jak je vidět, bez sebemenší práce a kódu navíc docela pěkné a funkční tlačítko.

Takovému tlačítku lze měnit margin, padding, styl a barvu písma a hromadu dalších věcí, problém ale nastane, když se formulářovému prvku sáhne na rámeček (border) nebo pozadí (background). To celou výše uvedenou funkčnost a styl totálně rozhází. Nezbývá tedy než si všech pět stylů nadefinovat ručně.

Vlastní styl

Vstupní pole

Běžné <input type=text> nebo pole <textarea> lze stylovat docela rozumně.

Snad jediný zádrhel je v Explorerech (do IE 8 včetně) při nastavení paddingu a přeplnění pole — IE takový text posune natěsno k levému kraji padding nepadding.

Tlačítka

Co se týče tlačítek (<input type=submit> nebo <button>), zdá se bez nějakého hackování nebo bez komplikování kódu nemožné dosáhnout 100% shodného chování napříč prohlížeči.

  1. Opera a Internet Explorer všech versí při kliknutí (:active) nepatrně posouvají text doprava dolů. V Opeře lze toto chování odbourat pomocí position: relative pro tlačítko, v Exploreru ale nejspíš možnost zbavit se tohoto efektu není.
  2. Chrome narozdíl od ostatních prohlížečů při kliknutí a podržení myši nad tlačítkem nevyvolává :focus.
Element <select> a <input>y checkbox a radio

Zde už je situace v podstatě beznadějná. Změnou rámečku nebo pozadí se přepneme na styl Windows 95:

A puntík, zaškrtávátko nebo šipku pro rozbalení není možnost změnit.

Stylování <select> je podrobněji popsáno v článku Stylování <select>u.

Řešení v JavaScriptu

Pro napříč prohlížeči shodné formuláře s vlastním vzhledem je tedy potřeba formulářové prvky nepoužívat. Přesněji řečeno je schovat a viditelné části formuláře sestavit z <div>ů a <span>ů.

Existují hotová řešení:

PrettyForm

Jednoduchá a přísupná knihovna podporující i věci jako ovládání klávesnicí. Funkční i v prehistorických prohlížečích. (Vlákno na DJPW.)

Selectmenu

Plugin do jQuery UI řešící <select>y. Funkční napříč prohlížeči.

Select2

Taktéž jQuery plugin pro pokročilejší <select>y. Funkční až od IE 8.

Na co si dát pozor

  • „Nepřechytračit“ uživatele, tj. nezměnit chování formuláře v dobré víře tak, že bude pro uživatele nepředvídatelné.
  • V případě použití obrázků dbát na kontrast (viditelnost) prvků i v případě, že se obrázky nenačtou.
  • Pokud možno zachovat obvyklé chování, zejména možnost ovládat formulář klávesnicí (tabindex atd.).

Odkazy jinam

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Odkaz jako tlačítko

Odkaz vypadající jako tlačítko

Odkaz jako tlačítko, nebo tlačítko jako odkaz? Postup, jak z odkazu vyrobit tlačítko a naopak.

CSS reset formulářů

Formuláře a CSS reset

Dopad * {margin: 0; padding: 0} na formulářové prvky.

Stylování formulářových políček

Stylování formulářových políček a tlačítek

Které CSS vlastnosti si ohlídat při dosahování perfektního stylu vstupní políček a odesílacích tlačítek.

Selektory :valid a :invalid

CSS selektory :valid a :invalid

CSS selektory :valid a :invalid umí rozpoznat správně nebo špatně vyplněné formulářové políčko.

Before a after u inputu

Before a after u <input>u

Funguje, nebo nefunguje použití :before a :after u <input>ů?

Komentáře