Naučte sa vylepšiť vzhľad svojich webových stránok
Naučiť sa, ako štýly formulárov pomocou CSS, je skvelý spôsob, ako zlepšiť vzhľad svojich webových stránok. Formuláre HTML sú pravdepodobne medzi najhoršie veci na väčšine webových stránok. Sú často nudné a utilitárske a neponúkajú veľa spôsobu štýlu.
S CSS sa to môže zmeniť. Kombinácia CSS s pokročilejšími značkami formulára prináša niektoré pekné vzory.
Zmeňte farby
Rovnako ako v texte, môžete zmeniť farby popredia a pozadia prvkov formulára.
Jednoduchý spôsob, ako zmeniť farbu pozadia takmer každého prvku formulára, je použiť vlastnosť farby pozadia na vstupnej značke. Tento kód napríklad používa modrú farbu pozadia (# 9cf) na všetkých prvkoch.
vstup {
farba pozadia: # 9cf;
farba: # 000;
}
Ak chcete zmeniť farbu pozadia iba niektorých prvkov formulára, stačí pridať textarea a vybrať štýl. Napríklad:
vstup, textarea, vyberte {
farba pozadia: # 9cf;
farba: # 000;
}
Nezabudnite zmeniť farbu textu, ak robíte tmavú farbu pozadia. Kontrastné farby pomáhajú tvoriť čitateľné prvky. Napríklad text na tmavomodrej farbe pozadia sa oveľa ľahšie prečíta, ak je farba textu biela. Tento kód napríklad uvádza biely text na červenom pozadí.
vstup, textarea, vyberte {
farba pozadia: # c00;
farba: #fff;
}
Môžete dokonca dať farbu pozadia na značku formulára sám. Pamätajte na to, že značka formulára je prvok bloku , takže farba vyplní celý obdĺžnik, nielen umiestnenie prvkov.
Môžete pridať žlté pozadie do prvku bloku, aby sa oblasť vyčnievala takto:
forma {
farba pozadia: #ffc;
}
Pridať okraje
Rovnako ako v prípade farieb môžete zmeniť okraje rôznych prvkov formulára. Môžete pridať jednu hranicu okolo celého formulára. Uistite sa, že ste pridali polstrovanie, alebo sa vaše prvky formulára uviazli hneď vedľa hranice.
Tu je príklad kódu pre 1-pixelový čierny okraj s 5 pixelmi výplne:
forma {
hranica: 1px solid # 000;
polstrovanie: 5px;
}
Môžete položiť hranice viac ako samotnú formu. Zmeňte okraj vstupných položiek, aby ste vynikli:
vstup {
okraj: 2px dashed # c00;
}
Buďte opatrní, keď vložíte hranice do vstupných políčok, pretože vyzerajú menej ako vstupné krabice a niektorí ľudia si nemusia uvedomiť, že môžu vyplniť formulár.
Kombinovať funkcie štýlu
Vytváraním prvkov formulára s myšlienkou a niektorými CSS môžete nastaviť pekne vyzerajúcu podobu, ktorá dopĺňa dizajn a rozloženie vašej stránky.