Moderní tvorba webových aplikací

O webu

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.

4 minuty

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.


Související články

Jak „focusovat“ správně díky :focus-visible

Jak správně řešit označený (:focus) stav formulářových prvků.

4 minuty

Poskakování obsahu akčních tlačítek

Jak vyřešit problém s poskakováním obsahu, když se změní textace nebo tučnost tlačítka.

9 minut

Stylování <input type=number>

Jak stylovat <input> pro zadávání čísel.

7 minut

Různá šířka <input type=number> s min/max

Proč má <input type=number> různou výchozí šířku v závislosti na min/max atributech.

3 minuty

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025