Formulář Se Stylizovanými štítky
Jak upravit styl štítku formuláře pomocí CSS. Element formuláře, který se používá k označení různých polí a vstupních oblastí na formuláři webové stránky, je element label. Lze jej upravit pomocí pravidel kaskádových stylů.
Krok 1
Chcete-li stylizovat prvky štítku tak, jak se zobrazují na obrázku v úvodu, musíte použít prvek štítku s atributem „pro“. Kromě toho musíte před přidáním samotného prvku „input“ zavřít prvek štítku. HTML pro celý formulář je znázorněno na obrázku.
Video dne
Krok 2
Abych stylizoval prvky štítků, nechal jsem štítky zobrazit jako prvky na úrovni bloku, které byly plovoucí doleva. Poté jsem štítkům přidělil šířku, aby všechna vstupní pole byla v jednotné vzdálenosti od štítků. Přiřadil jsem barvu a udělal text tučným. Použil jsem vygenerovaný obsah k přidání dvojtečky (:) za štítek. (Dvojtečka se nemusí objevit v každém prohlížeči.)
Tady je CSS:
štítek { barva: #B4886B; váha písma: tučné; displej: blok; šířka: 150px; plavat vlevo; } label: after { content: ": " }
Krok 3
Jen pro úplnost vám také ukážu CSS použité ke stylování sady polí, protože prvky štítků jsou ohraničeny ohraničenou sadou polí.
Tady je ten CSS:
fieldset { border: 1px solid #CCA383; šířka: 400px; pozadí: #FFE8EF; výplň: 3px; } legenda sady polí { pozadí: #CCA383; výplň: 6px; váha písma: tučné; }
Krok 4
Pro stylování prvků štítku můžete udělat mnoho dalších věcí. Můj příklad je jen jeden způsob, jak to udělat.
HTML formuláře
Věci, které budete potřebovat
Pracovní znalost HTML
Pracovní znalost CSS
