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

Pokud se rozhodneme pro vlastní vzhled formulářů, nevyhneme se resetování původních hodnot. (Tím není myšlen jen obyčejný hvězdičkový reset, který toho z vzhledu formulářů zase tolik neodstraní.)

Chceme-li docílit prostého vzhledu, kde budou popisky (<label>), vstupní pole (<input>) i tlačítka (<button>/<input type=text>) vypadat jako obyčejné prázdné elementy (<div> a <span>) a budou tak hezky lícovat:

Není to úplná legrace.

Co všechno resetovat/sjednotit?

Odsazení

Vnitřní i vnější odsazení — padding a margin.

Rámeček

Rámeček tlačítek a vstupních políček — border.

Písmo

Různý styl i velikost písma způsobí různou různou výšku řádku — font-size a font-family.

Výška řádku

Nastavit výšku řádku je možné pomocí line-height po nastavení display: (inline-)block. Na <input>y to nefunguje, takže se jim musí ještě přidat height/min-height se stejnou hodnotou.

Odsazení při :focus ve Firefoxu

Ve Firefoxu vzhled políček ještě upravují vlastnosti v pseudoelementu button::-moz-focus-inner. Hodnoty padding a border je vhodné nastavit na nulu.

Živá ukázka funkční od IE 8.

Pro znázornění :focusu je možné použít třeba box-shadow a resetovat outline, který je v některých prohlížečích výchozí (Chrome).

I v IE 7 by požadovaného vzhledu šlo docílit obtékáním (vlastností float). Ukázka.