input type=”file”のボタンを画像に変更(si.files.js)

JavaScript web制作 アプリケーション別 プログラミング

広報:齊藤 メイ 広報:齊藤 メイ

Posted on 2014年06月13日(金)10:00
Updated on 2015年07月18日(土)16:49


input type=”file”のボタンを画像に変更(si.files.js)

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

 

 

CSS

 

 

JavaScript

 

 

上述の通りそもそもな話もありますが、これでデザインの幅が広がりましたね。


いかがでしたでしょうか?
猫ITソリューションズは、飼い主の皆さんにITを活用しあらゆるシーンで的確なアドバイスをいたします。それではまたお会いしましょう。

input type=”file”のボタンを画像に変更(si.files.js)

see you!

 

本件に関するお問い合わせ先

猫ITソリューションズ

049-290-8502
お問い合わせフォーム



Member Profile

広報:齊藤 メイ

埼玉在住の三毛猫です。趣味は日向ぼっこ、好きな猫缶はカツオ系です。仲良くしてくださいね!

Facebook
Twitter

代表:齊藤 智宏

埼玉在住のWebデベロッパーです。80's洋楽、映画、レトロゲームが大好きです。よろしく!

Facebook
Twitter

Contact

ご意見、ご相談などお気軽にお問い合わせ下さい。お問い合わせ内容の確認後、担当者よりご連絡させていただきます。

049-290-8502
お問い合わせフォーム