Stiliziranje tekst okvira

Tekst okvir (textbox) je obvezan dio svake web forme pa ćemo vidjeti kako mu promijeniti stil. U ovom pregledu vidjet ćemo značenje nekih atributa koji su posebno zanimljivi:


1. background-color
2. color
3. background
5. border
6. text-align


Nećemo puno objašnjavati šta koji atribut znači nego idemo vidjeti primjere upotrebe pa će objašnjenje samo doći.

<input type="text" style="width:150px; background-color:#c9c9c9;color:#00aa00;">

U gornjem primjeru promijenili smo dužinu, boju pozadine i boju slova tekst okvira. Idemo dalje sa primjerima.

<input type="text" style="width:150px;background:url (info.gif) no-repeat 100% 50%;text-align:right;border: dotted 2px #0088ff;">

Vidimo kako se lako može dodati i pozadina u tekstualni okvir. Osim toga možemo mijenjati širinu i izgled ruba okvira. Na dodanu sliku u pozadini stavili smo atribut no-repeat jer želimo da se slika pojavi samo jednom u okviru. Na isti način možemo dodati gradijent u pozadini. Najprije trebamo napraviti sliku pozadine npr. i napišemo kod za sve:

<input type="text" style="width:150px;background: url(pozadina.gif) repeat-x;border: solid 1px #0088ff;">

Osim ovih atributa možete koristiti još i font-family, font-size, font-weight i puno drugih. Također, sve što vrijedi za tekst okvire vrijede i za dokument okvire:

<input type="file">

KOMENTARI:

Samo registrirani korisnici mogu komentirati.