[JS]フォームのファイルボタンを画像に変更するスクリプト -Styling File Inputs

Post on:2007年9月12日

sponsors

Styling File Inputsは、フォームのファイルボタン(input type="file")をJavaScriptとCSSで、好きな画像に変更できるスクリプトです。

実装は簡単です。
「si.files.js」を外部ファイルとして記述し、HTMLは下記のように記述します。

&lt;label&nbsp;class=&quot;cabinet&quot;&gt;&nbsp;
&lt;input&nbsp;type=&quot;file&quot;&nbsp;class=&quot;file&quot;&nbsp;/&gt;
&lt;/label&gt;

<label class="cabinet"> 

<input type="file" class="file" />

</label>

※labelとinputのclassは、それぞれ変更可能。

画像の差し替えやサイズなどの変更は、スタイルシートを修正します。