Input [type=”text”] Razloženo

Inputi su toliko važni u dizajnu “korisničkog iskustva” i presudno je da se njihov stil savršeno prenese s dizajna na stranicu. Nije tajna da vam je za prezentaciju na web stranici potreban CSS, ali zeznuti dio je kako je učiniti što boljom.

Inputi imaju više varijanti, stanja i stvari o sebi nego bilo koji drugi element u HTML-u, pa, hajde da pokrijemo sve što treba znati o post input unosa teksta. Provalimo ulaz!

Input [type=”text”]

Input tekst predstavlja prazan kvadrat tamo gdje se očekuje tekst. To je prilično čest element i, u većini slučajeva, predstavlja beli element okružen okvirom u boji.

Dobra je praksa dodavanje placeholder teksta unutar njega i oznaka izvan njega.

Default intput text

Default input text in focus state

Default placeholder text

Default autofill state

Da biste dodali željeni stil unosu, postoji nekoliko standardnih opcija i nekoliko posebnih. Ako postoji labela za ulaz(input), ona se dodaje u label element pored input-a, a njen atribut for ima istu vrednost
kao i atribut id povezanog input elementa. Label element može se oblikovati poput standardnog elementa HTML teksta.

Za input, standardno je da se menjaju dimenzije, okvir (border), boja pozadine (background-color),radijus okvira (border-radius) i font opcije. Nije standardno da se stilizuje placeholder text, fokus, autofill i validation stanje. Ove ne standardne opcije bice objasnjene u sledecem artiklu i posle toga neki primeri korištenja drugačijih opcija biće prezentovani.

Placeholder text

Za stilizaciju placeholder text-a stavljenog sa placeholder atributom, ::placeholder pseudo element je korišten. Sve stilizacije teksta su podrzane (font, boja, pozadina, vidljivost, rastojanje izmedju rijeci,
transformacija teksta, visina linije). U Firefox pretrazivaču svi placeholder-i imaju vrednost vidljivosti primenjenu sto znaci da bi resetovali tu vrednost neophodno je definisati vidljivost (opacity).

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
...
}
::-moz-placeholder { /* Firefox 19+ */
opacity:1;
...
}
:-ms-input-placeholder { /* IE 10+ */
...
}
:-moz-placeholder { /* Firefox 18- */...
}

Primer:

::placeholder{
color: coral;
font-size: 14px;
font-family: sans-serif;
letter-spacing: .2px;
padding-left: 5px;
}

Rezultat:

Focus state

Stanje fokusa je važno za korisničko iskustvo i postoji na svakom ulaznom elementu. Koristi se za indikaciju trenutno ciljanog elementa. Ovo je stanje predstavljeno plavim okvirom oko elementa, a u CSS-u je odabrano sa pseudo klasom :focus.

Plavi okvir oko fokusiranog elementa dodat je sa default linijom outline:auto 5px -webkit-focus-ring-color i ta zadana vrednost boje definisana je u temi pretrazivača. U nekim slučajevima ova prezentacija smeta dizajnerima elementa i neki ljudi odluče da je onemoguće sljedećim kodom:

:focus{
outline:none;
}

To je jako loša praksa i trebalo bi se izbegavati. Umesto neutralizovanog stila za focus state, mozete to stilizovati na vas način i to ne mora da uključuje outline.

Primer:

:focus{
outline:none;
border:1px solid coral;
box-shadow:0 0 5px coral;
}

Rezultat:

To je dobar nacin da dodate tranziciju u ovom slučaju (I u svakom drugom!).

Autocomplete state

Webkit pretrazivači pružaju postavku koja omogućava korisnicima da automatski popunjavaju detalje za uobičajene forme polja. To ste videli kad ispunjavate formu koja traži stvari poput imena, adrese i e-pošte. Autocomplete polja imaju zadanu žutu pozadinu i to je nešto što može ometati dizajn, a takođe je i nešto što se lako može promeniti (u ovom načinu možete promeniti i boju teksta)

:-webkit-autofill {-webkit-box-shadow: 0 0 0 1000px mintcream inset !important;
}
:-webkit-autofill {
-webkit-text-fill-color: coral !important;
}

Rezultat:

Validation states (polja validacije)

Postoje dve relativno nove pseudo klase :valid i :invalid. Ove pseudo klase korisne su da bi se istakli uspesi i greške za korisnika. Uobičajeno je videti zelenu boju kada je sadržaj validan i crvenu ako nije,
pa sada to lako možete definisati sa CSS-om. Starije verzije pretrazivača to nece podržati, imajte to na umu.

:valid {
box-shadow: -5px 0 lime;
border-left: none;
}
:invalid {
box-shadow: -5px 0 orangered;
border-left: none;
}

box-shadow opcija je korištena umesto border-left, zato što postoji vizuelni problem u slucaju kada okviri jednog elementa imaju različit stil ili boju.

Rezultat:

Dodatni savet

Još jedan problem sa input poljima je jedan na iOS-u koji se pojavljuje zato što je dodat default styling. Postoji i neka dodatna zaobljenja ivica i dropshadows. Najbolji nacin koji sam pronasano da rešim to je jedan sa daretothink bloga:

-webkit-appearance: none;
border-radius: 0;

Dobar primer

Završna reč

Rad na dizajnu input polja je nešto što uvek možete raditi i nešto što će vaš korisnik iznimno ceniti. Još jednom napominjem vas da koristite tranzicije u stilizovanju.

Za vise dobrih primera pretplatite se naš bilten.