Formulár so štýlovými štítkami
Ako upraviť štýl štítku formulára pomocou CSS. Prvok formulára, ktorý sa používa na označenie rôznych polí a oblastí vstupu na formulári webovej stránky, je prvok označenia. Môže byť upravený pomocou pravidiel kaskádových štýlov.
Krok 1
Ak chcete upraviť štýl prvkov označenia tak, ako sa zobrazujú na obrázku v úvode, musíte použiť prvok označenia s atribútom „pre“. Okrem toho musíte pred pridaním samotného prvku „vstup“ zavrieť prvok označenia. Kód HTML pre úplný formulár je znázornený na obrázku.
Video dňa
Krok 2
Na úpravu prvkov štítkov som štítky nechal zobraziť ako prvky na úrovni bloku, ktoré sa vznášali doľava. Potom som štítkom priradil šírku tak, aby všetky vstupné polia boli v rovnakej vzdialenosti od štítkov. Priradil som farbu a text som urobil tučným. Použil som vygenerovaný obsah na pridanie dvojbodky (: ) za štítok. (Dvojbodka sa nemusí zobraziť v každom prehliadači.)
Tu je CSS:
štítok { farba: #B4886B; váha písma: tučné; displej: blok; šírka: 150px; plavák: vľavo; } štítok: po { content: ": " }
Krok 3
Len pre úplnosť vám tiež ukážem CSS, ktorý sa používa na štýl sady polí, keďže prvky štítkov sú ohraničené ohraničenou sadou polí.
Tu je ten CSS:
fieldset { border: 1px solid #CCA383; šírka: 400px; pozadie: #FFE8EF; výplň: 3px; } legenda sady polí { pozadie: #CCA383; výplň: 6px; váha písma: tučné; }
Krok 4
Na úpravu prvkov štítkov môžete urobiť mnoho ďalších vecí. Môj príklad je len jedným zo spôsobov, ako to urobiť.
HTML formulára
Veci, ktoré budete potrebovať
Pracovná znalosť HTML
Pracovná znalosť CSS
