S pomocí kaskádovacích stylů se dají dělat různé zajímavé věci. Například je možné změnit pozadí všech formulářových prvků. Ptáte se jak? Nic těžkého to není a tento článek vám poradí.

Klasické HTML formuláře a jednotlivé fornulářové prvky zná snad každý uživatel Internet. Jsou používány v anketách, v dotaznících, někdy dokonce slouží jako navigační prvky. Někdy ovšem nevyhovuje jejich standardní šedá barva, která se na některé weby skutečně nehodí. Naštěstí – existují styly a existuje tento článek:o)

Změna barvy:

V tomto článku vám ukážu změnu barvy zaškrtávacího tlačítka (checkbox), textového pole formuláře, odesílacího tlačítka a rolovacího menu:

Checkbox
Textové pole
Rolovací menu
Odesílací tlačítko


Změna prvku formulářového tlačítka se provádí vložením tohoto jednoduchého stylu přímo do definice prvku:

style=“background-color: barva;“


V našem případě bude HTML kód vypadat následovně:

<form>
<input type=“checkbox“ style=“background-color: green;“>
<input type=“text“ size=“10″ style=“background-color: yellow;“>
<select name=““ style=“background-color: #6699ff;“><option>Položka</select>
<input type=“submit“ value=“Odeslat“ style=“background-color: red;“>
</form>


A výsledek vypadá takhle:

Checkbox
Textové pole
Rolovací menu
Odesílací tlačítko


Barvy pochopitelně můžete libovolně změnit. Tento tip bude pouze fungovat pouze v Internet Exploreru od verze 4.0. Netscape Navigator (testováno ve verzi 4.7) formulářové prvky zobrazí, nicméně – pouze se standardními barvami.

Změna řezu a velikosti textu

Pomocí stylů můžete samozřejmě změnit hromadu dalších věcí, nikoli jenom barvu. Je možné změnit například druh písma, jeho velikost atd. Například jiný druh písma (Arial) a velikost textu (14 bodů) u formulářového tlačítka provedete vložením tohoto stylu:

style=“font-family: Arial; font-size: 14pt;“


Tlačítko pak bude vypadat takhle:

Způsob změny řezu textu a velikosti u ostatních formulářových prvků je stejný – stačí pouze vložit styl. Přeji vám hodně štěstí při vytváření zajímavých kombinací.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

Žádný příspěvek v diskuzi

Odpovědět