CSS- vorms
Die voorkoms van 'n HTML-vorm kan aansienlik verbeter word met CSS:
Stileer invoervelde
Gebruik die width
eienskap om die breedte van die invoerveld te bepaal:
Voorbeeld
input
{
width: 100%;
}
Die voorbeeld hierbo is van toepassing op alle <invoer>-elemente. As jy net 'n spesifieke invoertipe wil stileer, kan jy kenmerkkiesers gebruik:
input[type=text]
- sal slegs teksvelde kiesinput[type=password]
- sal slegs wagwoordvelde kiesinput[type=number]
- sal slegs nommervelde kies- ens.
Opgevulde insette
Gebruik die padding
eiendom om spasie binne die teksveld by te voeg.
Wenk: Wanneer jy baie invoere na mekaar het, wil jy dalk ook 'n paar margin
byvoeg om meer spasie daarbuite by te voeg:
Voorbeeld
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
Let daarop dat ons die box-sizing
eiendom op gestel het
border-box
. Dit maak seker dat die vulling en uiteindelik grense by die totale breedte en hoogte van die elemente ingesluit word.
Lees meer oor die box-sizing
eiendom in ons CSS Box Sizing- hoofstuk.
Begrensde insette
Gebruik die border
eienskap om die randgrootte en kleur te verander, en gebruik die border-radius
eienskap om afgeronde hoeke by te voeg:
Voorbeeld
input[type=text]
{
border: 2px solid red;
border-radius: 4px;
}
As jy net 'n onderste rand wil hê, gebruik die border-bottom
eiendom:
Voorbeeld
input[type=text]
{
border: none;
border-bottom: 2px solid red;
}
Gekleurde insette
Gebruik die background-color
eiendom om 'n agtergrondkleur by die invoer te voeg, en die color
eiendom om die tekskleur te verander:
Voorbeeld
input[type=text]
{
background-color: #3CBC8D;
color: white;
}
Gefokusde insette
By verstek sal sommige blaaiers 'n blou buitelyn rondom die invoer byvoeg wanneer dit gefokus word (op geklik). Jy kan hierdie gedrag verwyder deur by outline: none;
die invoer by te voeg.
Gebruik die :focus
kieser om iets met die invoerveld te doen wanneer dit fokus kry:
Voorbeeld
input[type=text]:focus
{
background-color: lightblue;
}
Voorbeeld
input[type=text]:focus
{
border: 3px solid #555;
}
Invoer met ikoon/beeld
As jy 'n ikoon binne die invoer wil hê, gebruik die background-image
eiendom en plaas dit saam met die background-position
eiendom. Let ook op dat ons 'n groot linkeropvulling byvoeg om die spasie van die ikoon te behou:
Voorbeeld
input[type=text]
{
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
}
Geanimeerde soekinvoer
In hierdie voorbeeld gebruik ons die CSS transition
-eienskap om die breedte van die soekinvoer te animeer wanneer dit fokus kry. Jy sal later meer oor die
transition
eiendom leer, in ons CSS Transitions- hoofstuk.
Voorbeeld
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
Stileer teksareas
Wenk: Gebruik die resize
eienskap om te verhoed dat die grootte van teksareas verander word (deaktiveer die "grabber" in die onderste regterhoek):
Voorbeeld
textarea
{
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
Stilering Kies spyskaarte
Voorbeeld
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
Stilering-invoerknoppies
Voorbeeld
input[type=button], input[type=submit], input[type=reset]
{
background-color: #4CAF50;
border:
none;
color: white;
padding:
16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* Tip: use width: 100% for full-width buttons */
Vir meer inligting oor hoe om knoppies met CSS te styl, lees ons CSS Buttons Tutoriaal .
Responsiewe vorm
Verander die grootte van die blaaiervenster om die effek te sien. Wanneer die skerm minder as 600px wyd is, laat die twee kolomme bo-op mekaar stapel in plaas van langs mekaar.
Gevorderd: Die volgende voorbeeld gebruik medianavrae om 'n responsiewe vorm te skep. Jy sal meer hieroor leer in 'n latere hoofstuk.