開発畑トップ   »  Javascript

[CSS,Javascript]Labelを使ってFile Inputのデザインを変える!

2012年03月23日

Category:jQuery

tag: CSS , HTML , Javascript , PHP , jQuery

Label要素を使ってinput要素の「type="file"」の見た目を変えてみました!
最初はfileは非表示にしてbutton要素を別に作って、button要素をclickしたらjavascriptでfileをclickするようにしたんですが、ブラウザによって動かないものがああるので、Labelを使う方法になりました。

fileはセキュリティ的な関係でjavascriptに制限がるみたいですね。

実行サンプル

※アップロードしたファイルはPHP側で破棄しています(なんの処理もしていません)のでご安心くださいませ(^-^)


続きはこちら