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

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:

Jednoduchý styl <label>u, <input>u a <button>u

Není to úplná legrace.

  • Živá ukázka – nastavení výšky políčka a tlačítka pomocí height a line-height

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.


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ářů ↓

Stylování tabulky

Stylování HTML tabulek

Jednoduché barvení a další stylování značky <table>.

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

Vlastní vzhled formulářů

Jak vytvořit originálně vypadající formulář, aniž by házel uživatelům klacky pod nohy?

Vylepšené stylování checkboxů

Pokročilé stylování checkboxu

Díky selektoru :checked lze v podporujících prohlížečích (Explorer 9 a novější) vytvářet zaškrtávací <input>y neotřelé podoby.

Stylování atributu title

Vlastní styl bubliny title

Jaké jsou možnosti pro vlastní vzhled nápovědy, která se objevuje při vyplnění atributu title.

Stylování <select>u

Stylování <select>u

Roletový seznam nabízí omezené možnosti v úpravách vzhledu. Které to jsou a jak je rozšířit?

Komentáře