Lomake tyylitellyillä tarroilla
Kuinka muotoilla lomaketarra CSS: llä. Lomakeelementti, jota käytetään merkitsemään verkkosivun lomakkeen eri kenttiä ja syöttöalueita, on otsikkoelementti. Se voidaan muotoilla käyttämällä Cascading Style Sheet -sääntöjä.
Vaihe 1
Jotta voit muotoilla tarraelementit sellaiseksi kuin ne näkyvät johdannon kuvassa, sinun on käytettävä tarraelementtiä "for"-attribuutin kanssa. Lisäksi sinun on suljettava etikettielementti ennen kuin lisäät itse "input" -elementin. Täydellisen lomakkeen HTML-koodi kuvassa.
Päivän video
Vaihe 2
Tarraelementtien tyylistämiseksi laitoin tarrat näkyviin lohkotason elementteinä, jotka kellutettiin vasemmalle. Sitten määritin tarroille leveyden, jotta syöttökentät olisivat tasaisen etäisyyden päässä tarroista. Annoin värin ja lihavoitin tekstin. Lisäsin luodun sisällön kaksoispisteen (: ) otsikon perään. (Kaksoispiste ei välttämättä näy kaikissa selaimissa.)
Tässä CSS:
etiketti { väri: #B4886B; fontin paino: lihavoitu; näyttö: lohko; leveys: 150 pikseliä; kellua: vasen; } otsikko: jälkeen { content: ": " }
Vaihe 3
Täydellisyyden vuoksi näytän sinulle myös CSS: n, jota käytetään kenttäjoukon tyyliin, koska tarraelementit on ympäröity reunuksella.
Tässä se CSS:
fieldset { border: 1px solid #CCA383; leveys: 400px; tausta: #FFE8EF; täyte: 3px; } kenttäjoukon selite { tausta: #CCA383; täyte: 6px; fontin paino: lihavoitu; }
Vaihe 4
Voit tehdä monia muita asioita muotoillaksesi etikettielementtejä. Esimerkkini on vain yksi tapa tehdä se.
Lomake HTML
Asiat, joita tarvitset
Työskentely HTML: n tuntemuksella
CSS: n työtaitoa
