フォームのファイル参照を画像ボタンにする

週末は三連休でしたねっ、皆様どうされてましたか？
私は妻と赤ちゃんと一緒に買い物にいったり、友達の家に遊びに行ったりしておりました。
正直すごく疲れましたが、楽しかったです。

欲を言えば、もう少し時間があって、サイトのデザインを作りたかったです。
・・・と言っている時点で、私はまだまだだ甘ちゃんだなと思ったりもするものです。



よくWebサイトを作るうえで、ボタンを画像にしたりします。
昔はボタンといえばブラウザ標準のボタンでしたが、今はサイトのデザインがかなり重視されてきていますし、ボタンも画像を用いてトータルにデザインすることがほとんどだと思います。

そんな中でも、ボタンを画像にできないのがファイルをアップロードしたりする際に用いる『参照』ボタン。

<input type="file" name="myFile" />

こればかりは画像にすることができません。
そう思っていた時期が私にもありました。


[JS]フォームのファイルボタンを画像に変更するスクリプト -Styling File Inputs | コリス
世の中には同じようなことを考える人がやっぱりいるみたいで、それに対応できるようにJavascriptを組んでいる人がいるみたいです。
コリスさんがそれに関する紹介記事を書かれていたので、そちらへのリンクを貼っておきます。


実際に使ってみると、簡単に画像ファイルに変える事ができます。
私的に気になったのは、参照したファイル名の欄も消えてしまうことですね。

「そんなの見る人いないよ！」

とか言われそうで、私自身もそんなの見ない人ですが、いざなくなってみると気になるんですよーっ（汗
使えそうな時に、また今度使ってみようかと思います。