Tässä on toimii-jos-toimii -periaatteella rakennettu viritys, jonka avulla saadaan muotoiltua input="file"-tyyppiä edustavan (X)HTML-lomakkeen tiedostonsiirtoelementin ulkonäköä puhtaasti CSS-merkkauksen avulla. Suuria ja ylväitä sanoja. Käytännössä tämän lomake-elementin säätäminen halutunnäköiseksi onnistuu ihan vain hapuilemalla. Tässä annetut esimerkit eivät varmaankaan toimi kaikissa tapauksissa tai kaikissa nettiselaimissa.
Lomake-elementin muotoilemista varten joudutaan laittamaan esimerkiksi span-tagi muotoiltavaksi valitun file input -kentän ympärille. Näin:
<span><input type="file" /></span>
Tämä sen takia, ettei tuota input-kenttää oikein muuten saa ruttuun. span-kääryleen sisälle laitetaan myöhemmin esimerkiksi kuvatiedosto, missä lukee “Valitse tiedosto…” tai vaikkapa jonkinlainen symboli, josta ilmenee kyseessä olevan tiedostonsiirtokenttä.
Seuraavaksi olisi kaiveltava muistista image replacement -kikkojen periaatteita. Tässähän on käytännössä sama idea kuin tavallisen tekstin piilottaminen ja sen korvaaminen kuvatiedostolla, paitsi sillä erotuksella että nyt piilotetaan ainakin osittain tuo file input ja laitetaan sen tilalle (taustalle) hyllymään oma kuvatiedosto. Tässä tempussa käytetään hyväksi myös CSS:n avulla luotavaa läpinäkyvyyttä. Joudumme laittamaan itse tiedostonsiirtokentän näkymättömiin, mutta kuitenkin siten että sitä voidaan klikata. Kun tiedostonsiirtokenttä on piilossa ja klikkauskelpoinen, asetetaan span-elementin taustakuvaksi haluttu kuvatiedosto. Sillä lailla. Virityksessä joudutaan kuitenkin tekemään kohtalaisen paljon hienosäätöä, että itse klikattava tiedostonsiirtokentän nappula saadaan span-kääreen kohdalle.
Tätä systeemiä rakennellessani mietin tovin jos toisenkin miten file inputin klikattava nappula saadaan pingotettua haluttuun kokoon… CSS:n avulla nappulaa ei saa suoraan suuremmaksi esim. lisäämällä elementin korkeutta. Ainoa toimiva ratkaisu on nähdäkseni kasvattaa file inputin fontin kokoa. Käytännössä siis näin:
form span input { font-size: 40px !important; }
Otetaan vielä askel kerrallaan ja katsotaan miten voisi kaikkein vaivattomimmin saavuttaa jonkinlaisen lopputuloksen.
file input -kenttä.Vau. Kolme vaihetta. Haastavin näistä lienee tuo kolmas. Se kun vaatii silmämääräistä säätämistä aikaisemmin mainitun input="file -tyyppiä olevan elementin kanssa. Kannattaa jättää alussa CSS-merkkausta säädettäessä tiedostonsiirtoelementti läpinäkyvyydeltään esim. 50 % tasolle, sillä siten nähdään missä se file inputin nappula oikein lymyilee ja onko se sopivan kokoinen. Nappula on oikeassa paikassa kun se peittää lomake-elementin ympärille käärityn span-tagin. Oikea paikka voi näyttää tältä. Tuosta linkistä avautuu kuvakaappaus, jossa tiedostonsiirtopömpeli on laitettu peittämään sitä ympäröivä span ihan ja täysin kokonaan. Kun nappula on saatu paikoilleen, voidaan vetää läpinäkyvyyssäätimet kaakkoon, eli piilotetaan file input CSS-tiedostoon merkatun läpinäkyvyyden avulla.
Niin. Jos se on niin se on. Tällaisessa tilanteessa voisimme vaikkapa lisätä nettisivulla näkyvän lomakkeen merkkaukseen, että:
<span class="disabled"><nput type="file" disabled="disabled" /></span>
Tällöin CSS-tiedostoon voisi säätää esimerkiksi tällaista liirumlaarumia:
form span.disabled {
opacity: .5;
filter: alpha(opacity=50);
Nyt tiedostonsiirtokentän taustakuvaksi asetettu kuvatiedosto näkyy vain puoliksi läpinäkyvänä. Tietysti koko kuvatiedoston voi vaihtaa esittämään disabled="disabled" -tilassa olevaa nappulaa tai muuta symbolia. Tai koko elementin voi piilottaa.
Tämän julkaisun kommentointi on suljettu.
Kun tämän julkaisun kommentointi oli vielä avoinna, tälle julkaisulle kirjoitettiin yhteensä 6 kommenttia. Tämä artikkeli on lokeroitu kategoriaan Web. Tämän julkaisun kestolinkin osoite on http://www.kuopassa.com/weblog/2007/09/22/file-input-kentan-esitystavan-muokkaaminen-cssn-avulla.
Antti kirjoitti 232 päivää sitten:
Olisihan tuo hieno, mutta Macissa tuo ei toimi Firefoxilla saati Safarilla – Operalla toimii, mutta näyttää kohtalaisen eksoottiselta.
Sonja kirjoitti 232 päivää sitten:
Voisit muuten päätellä tuosta tuon code-tagin. Avonaiseksi näyttäisi jääneen, ja sotkee loppusivun tekstit tasalevyisiksi.
Allekirjoitan myös Antin mac-huomion.
Petri kirjoitti 231 päivää sitten:
Yes, yes. Tätä systeemiä pitäisi siis kehitellä edelleen toimimaan myös Macin käyttäjiä varten… Sitten ehkä myös Linux-distrojen käyttäjiä varten. Työsarkaa on. Voisiko jompikumpi (kumpi kampi) linkittää screenshotin esim. tuosta demosta, jotta suuri yleisö näkisi miltä se näyttää?
Sonja, kiitos tuosta vinkistä. Sen “innoittamana” bongasin pari muutakin epäkohtaa, jotka W3C:n validaattorissa älähtävät.
Sonja kirjoitti 231 päivää sitten:
Safarilla nappi näyttääpi tältä, mutta käyttäytyy kuin… no… taustakuva. Ei siis mitään elämää missään.
Operalla namiska taas esiintyy tällaisena. Operalla nappi tuntuu reagoivan kyllä ulkomaailman kanssa.
Sonja kirjoitti 231 päivää sitten:
Ai niin. Firefoxilla nappi toimii pitkälti muuten samoin kuin Safarillakin (siis näkyy muttei elä), mutta kursori muuttuu tekstikursoriksi napin päällä.
Petri kirjoitti 230 päivää sitten:
Ahaa, ahaa. Tuo Opera-selaimesta napsaistu kuvakaappaus antaa syytä epäillä, että nappulan sijainti aiheuttaa toimimattomuuden. Screenshotissa näkyy oikeassa laidassa osittain läpinäkyvänä tiedostonsiirtoelementin nappula. Se nappula pitäisi siirtää CSS:n avulla abouttirallaa 50 pikseliä vasemmalle.
Tuo Firefoxista kertomasi kommentti kielii sen puolesta, että koko tiedostonsiirtokentän vasemmalle päin vetävän marginaalin arvo on liian pieni. Tekstikursorihan näkyy vain kun hiiren osoitin viedään elementin tiedostopolun kertovan tekstikentän ylle… Se tekstikenttä taas sijaitsee tiedostonsiirtonamiskan vasemmalla puolella. Macin Safari ja Firefox tekevät jostain syystä pienemmän marginaalin vasemmalle kuin täällä Windowsin puolella. Tai sitten ei. Todennäköisesti ei. Ehkä fontin koko tulkitaan eri selaimissa hieman eri tavoin. Lisäksi tiedostonsiirtokentän koko (korkeus, leveys) on kussakin nettiselaimessa ihan oma juttunsa.
Et silleen. Ei tätä saada toimimaan. Lukekaa vaikka Alighieria jos haluatte tehdä jotain hyödyllistä. :-]