Jak na vlastní design File Input položek formulářů

Každý již jistě někdy psal stránku, která umžňovala upload nějakého souboru. To je problém celkem jednoduše řešitelný, ovšem problém nastává, pokud máte nějaký design tlačítek na stránce a chcete, aby i tlačítko pro výběr souboru mělo jednotný design. A zde se už naráží.

Ovšem i toto je věc řešitelná (ve světě počítačů snad neexistují neřešitelné problémy). Celý postup názorně popisuje Shaun Inman ve svém blogu. V principu jde o kombinaci CSS, DOM a JavaScriptu.


Funguje to tak, že se input obalí wrapper-tagem (např. label), jemuž se nastaví pozadí na námi požadovaný vzhled. Následně se nastaví neprůhlednost (opacity) tagu input na 0, čímž se zneviditelní, ovšem stále je klikatelný. No a zavěrečný krůček nám pomůže udělat JavaScript, kterým zařídíme, že tlačítko pro výběr souboru bude vždy umístěno pod ukazatelem myši, pokud je uvnitř našeho wrapper-tagu.

A teď v jakých prohlížečích to funguje? Překvapivě IE 5.5+, Firefox 1.5+, Safari 2+. Uspokojivě je použitelné v IE 5.01 a Opeře.