Kako oblikovati oznako obrazca s CSS

Kako oblikovati oznako obrazca s CSS. Element obrazca, ki se uporablja za označevanje različnih polj in vnosnih območij na obrazcu spletne strani, je element label. Oblikujete ga lahko s pravili kaskadnega slogovnega lista.

1. korak

Če želite oblikovati elemente oznake tako, kot so prikazani na sliki v uvodu, morate uporabiti element oznake z atributom »za«. Poleg tega morate zapreti element oznake, preden dodate sam element "input". HTML za celoten obrazec je prikazan na sliki.

2. korak

Za oblikovanje elementov oznak sem poskrbel, da so oznake prikazane kot elementi na ravni bloka, ki so bili lebdeči na levi. Nato sem nalepkam določil širino, tako da so vsa vnosna polja enakomerno oddaljena od nalepk. Določil sem barvo in besedilo naredil krepko. Z ustvarjeno vsebino sem za oznako dodal dvopičje (:). (Dvopičje morda ne bo prikazano v vseh brskalnikih.)

Tukaj je CSS:

oznaka { barva:#B4886B; teža pisave:krepko; zaslon:blok; širina:150px; lebdi:levo; } label:after { content:":" }

3. korak

Samo zaradi popolnosti vam bom pokazal tudi CSS, uporabljen za stil nabora polj, saj so elementi oznake obdani z obrobljenim naborom polj.

Tukaj je ta CSS:

fieldset { border:1px solid #CCA383; širina:400px; ozadje:#FFE8EF; oblazinjenje:3px; } legenda nabora polj { ozadje:#CCA383; oblazinjenje:6px; teža pisave:krepko; }

4. korak

Za oblikovanje elementov etikete lahko naredite še marsikaj drugega. Moj primer je le eden od načinov za to.