Aspectul unui formular HTML poate fi mult îmbunătățită cu CSS:
Styling Câmpuri de intrare
Utilizați width proprietății pentru a determina lățimea câmpului de intrare:
Exemplul de mai sus se aplică tuturor <input> elemente. Dacă doriți doar să stil un tip de intrare specific, puteți folosi selectori de atribut:
-
input[type=text]- va selecta doar câmpurile de text -
input[type=password]- va selecta doar câmpurile de parolă -
input[type=number]- va selecta doar câmpurile numerice - etc ..
capitonate Intrări
Utilizați padding proprietatea de a adăuga spațiu în câmpul text.
Sfat: Când aveți mai multe intrări , după unul pe altul, ați putea dori , de asemenea , să adăugați o anumită margin , pentru a adăuga mai mult spațiu în afara acestora:
Exemplu
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
} Încearcă - l singur » Rețineți că ne - am stabilit box-sizing de proprietate la border-box . Acest lucru face sigur că padding și eventual frontierele sunt incluse în lățimea și înălțimea totală a elementelor.
Cititi mai multe despre box-sizing de proprietate în nostru CSS3 Caseta Dimensionarea capitol.
marginita Intrări
Utilizați border proprietatea de a schimba dimensiunea și culoarea de frontieră, și de a folosi border-radius proprietatea de a adăuga colturi rotunjite:
Dacă doriți doar o margine de jos, utilizați border-bottom proprietate:
Intrări colorate
Utilizați background-color de color background-color proprietate pentru a adăuga o culoare de fundal la intrare, iar color proprietatea de a schimba culoarea textului:
Intrări focusate
În mod implicit, unele browsere vor adăuga un contur albastru în jurul valorii de intrare atunci când acesta devine se concentreze (clicked on) . Aveți posibilitatea de a elimina acest comportament prin adăugarea de outline: none; la intrare.
Utilizați :focus se :focus selectorul de a face ceva cu câmpul de intrare atunci când se concentreze:
Intrare cu pictograma / imagine
Dacă doriți o pictogramă în interiorul intrare, utilizați background-image proprietate și poziționați - l cu background-position proprietate. De asemenea, observați că vom adăuga o padding mare stânga pentru a rezerva spațiul pictogramei:
Exemplu
input[type=text]
{
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
} Încearcă - l singur » Animate de intrare pentru căutarea
În acest exemplu , vom folosi CSS3 de transition proprietatea pentru a anima lățimea de intrare de căutare atunci când acesta devine concentra. Vei afla mai multe despre transition proprietate mai târziu, în nostru CSS3 Treceri capitol.
Exemplu
input[type=text] {
-webkit-transition: width 0.4s
ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
} Încearcă - l singur » Styling textarea
Sfat: Utilizați resize proprietatea de a preveni textarea de a fi redimensionate (disable the "grabber" in the bottom right corner) din (disable the "grabber" in the bottom right corner) :
Exemplu
textarea
{
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
} Încearcă - l singur » Styling Selectați Meniuri
Exemplu
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
} Încearcă - l singur » Styling Butoane de intrare
Exemplu
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 */ Încearcă - l singur » Pentru mai multe informații despre modul de stil butoane cu ajutorul CSS, citiți butoane CSS Tutorial .