webサイトのデザインは多種多様ですが、あまりデザインの手が加えられていない部分があります。それはフォームのファイル送信ボタンです。本日は「input type="file"のボタンを画像に変更（si.files.js）」についてです。
こんにちは。猫ITソリューションズ広報の齊藤メイ（♀）です。 本日は、「input type="file"のボタンを画像に変更（si.files.js）」についてです。
ファイルのアップロードなどに使われるファイル送信ボタンは、Webデベロッパー観点で仕組み＆仕様的にデザイン変更が難しい要素の一つです。また、
「ファイル送信ボタンとはこういうものだ」
と、開発者にもユーザーにも認識されているので、ユーザビリティを考慮すると変更しない方がいいかもしれません。しかし、それでも画像に変更したいという要望は無いとは限らない訳です。
si.files.js
そういった「ファイル送信ボタンを画像に変更したい！」という要望に応えてくれるのが、ここで紹介するsi.files.jsです。
Styling File Inputs with CSS and the DOM // ShaunInman.com
si.files.jsは多様なブラウザに対応していて、IE 5.5+ / Firefox 1.5+ / Safari 2+に対応しています。私が確認したところでは以下のブラウザに対応しています。
デザイン変更のする・しないがよくあるかは別として、ファイル送信ボタンはよくあるモノなので、非常に助かりますね。感謝します。
| ブラウザ | バージョン |
| Internet Explorer | 7,8,9,10 (10.0.9200.16736) |
| Google Chrome | 31.0.1650.63 m |
| Safari | 5.1.7 (7534.57.2) |
使い方
si.files.jsの使い方は以下の通りです。
多少ですがCSSの記述は必要になります。
（画像ファイルを指定しなくてはいけないため）
html
|
1 2 3 4 5 6 |
<!-- load --> <script src="/path/to/si.files.js" type="text/javascript"></script> <!-- sample --> <form action="xxxx.php" enctype="multipart/form-data" id="form_xxxx" method="post" name="form_xxxx" role="form"> <label class="cabinet"><input class="file" id="file_photo_xxxx" name="file_photo_xxxx" type="file" /></label> </form> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.SI-FILES-STYLIZED label.lable_holder { width: 79px; height: 22px; background: url(btn-choose-file.gif) 0 0 no-repeat; display: block; overflow: hidden; cursor: pointer; } .SI-FILES-STYLIZED label.lable_holder input.file_upload { position: relative; height: 100%; width: auto; opacity: 0; -moz-opacity: 0; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); } |
JavaScript
|
1 2 3 |
SI.Files.stylizeAll(); /* ↓formのIDを指定する場合. */ SI.Files.stylizeById('form_xxxx'); |
上述の通りそもそもな話もありますが、これでデザインの幅が広がりましたね。
