Web development by Damjan Gataric

Mnogi dizajneri ne vole ograničenja, a Web medij je onaj koji ih “pruža” u najvećem broju.

Od različitih vrsta browser-a, njihovih verzija, operativnih sistema do različitih rezolucija i veličina ekrana na kojima se prikazuju web stranice, Web ispada jedno najneprijateljskijih razvojnih okruženja.

Jedno od ograničenja nametnutih dizajnerima jeste “sistemski” izgled kontrole za odabir fajla za upload sa vaše web stranice, koji čak varira i izgledom i tekstom u različitim browser-ima.

Na sreću, moguće je isti u potpunosti izmeniti koristeći čisti CSS kod (bez pozivanja JavaScript-a u pomoć).
Ovo je provereno rešenje koje radi na svim novijim verzijama aktuelnih web browser-a.

Ova tehnika se zasniva na dobrom poznavanju CSS pozicioniranja.
Pa, da se bacimo na posao…

Prvo HTML formatiranje

<form action="">
<fieldset>
<legend>Forma</legend>

<label class="file-button"><input type="file" class="invinsible" /></label>

</fieldset>
</form>

Kao što vidimo ovo je klasično formatiranje elemenata za upload fajlova.

Najvažnije je da se element input nalazi unutar elementa label (imesto label može biti i div ili neki drugi element ali ovo je jedno od najispravnijih rešenja što se semantike koda tiče).

A onda CSS

label.file-button {
    overflow: hidden; /* da ne bi unutrašnji elementi provalili van */
    display: block; /* da bi mogli da podeševamo sirinu, visinu, pozadinu i sl */
    width: 80px; /* željena šrina */
    height: 25px; /* željena visina */
    cursor: pointer; /* zbog doživljaja korisnika */
    position: relative; /* da bi se unutrašnji element pozicionirao u odnosu na ovaj */

    /* ovo menjati po želji, najbolje bi bilo uklopiti se u postojeće dimenzije */
    background: #09F; /* prezentacija */
    border: 1px solid #069; /* prezentacija */
}

.invinsible {
    height: 100%;
    opacity: 0; /* skrivanje, CSS 3 validno*/
    -moz-opacity: 0; /* skrivanje za Mozillu, nazalost narusava validnost CSS koda */
    filter: alpha(opacity=0); /* skrivanje za IE, nazalost narusava validnost CSS koda */
    position: absolute; /* da se pozicionira apsolutno u odnosu na label */
    right: 0; /* i to u odnosu na desnu stranu */
    cursor: pointer; /* za svaki slučaj */
}

U ovom slučaju label ima ulogu da sakrije polje za odabir fajla (input) ispod sebe, dok njemu (label-u) možemo dodeliti izgled prema želji.
Dobro bilo samo da label bude dovoljno velik da pokrije polje za odabir fajla.

Što se dizajna izgleda samog elementa label tiče, slobodni ste da to uradite na vaš način.

Ovde je demo sa spartanskim izgledom dugmeta za odabir fajla.

Stranica je W3C XHTML validna i testirana u FF 3, IE 6 i 7, Opera 9.62, Safari 4 Beta, Chrome 1

CSS kod nije validan zbog korišćenja property-ja -moz-opacity i filter koji su tu zbog podrške stariji browser-ima, ukoliko ciljate na samo novije browser-e koji podržavaju CSS 3 slobodno izbacite te dve linije i vaš kod će biti W3C CCS 3 validan.

Tagovi: custom look

Objavljeno 26.05.2009 u 11:07 pm pod kategorijom CSS, Dizajn, HTML/XHTML. Možete pratiti komentare preko RSS 2.0 feed-a. Možete napisati komentar, ili trackback sa vašeg sajta.