トピックス

  1. HOME
  2. トピックス
  3. WEBコーディング
  4. ファイル添付用のinputタグをCSSでカスタマイズする方法

ファイル添付用のinputタグをCSSでカスタマイズする方法

フォーム関連のタグの見た目はブラウザ毎にデフォルトの見た目がありますが、WEBサイト毎にデザインに合わせて見た目を変更するとより統一感を持たせることができます。

今回はフォームのパーツの中でもファイル添付用のinputタグの見た目のカスタマイズ方法をご紹介します。

デフォルトの表示確認

デフォルトの見た目は下記のようになります。

これは本サイトを見るのに使っているブラウザの種類によって見た目が異なります。
もし、数種類のブラウザをインストールされているならば見た目の違いを確認してみてください。

サンプル

今回は下記のようなサンプルを用意しました。

選択されていません

HTML

HTMLのサンプルソースは下記になります。

<div id="attachment">
 <label><input type="file" name="ファイル添付" class="fileinput">ファイルを添付する</label>
 <span class="filename">選択されていません</span>
</div>

labelタグは、inputタグを直接クリックしなくても囲っている範囲をクリックすればinputタグが選択できるという特性があるのを利用します。

label部分だけでも構いませんが、今回はアップロードした添付ファイル名を一緒に表示させるための、「.filename」を用意しています。そのため「.filename」の記載は無くても問題ありません。

CSS

今回は下記のようなサンプルを用意しました。

#attachment label {
 /* ボタン部分の見た目(任意) */
 display: inline-block;
 position: relative;
 background: #666;
 color:#fff;
 font-size: 16px;
 padding: 10px 18px;
 border-radius: 4px;
 transition: all 0.3s;
}
#attachment label:hover {
 background: #888;
 transition: all 0.4s;
}
#attachment label input {
 /* 今回のポイント */
 position: absolute;
 left:0;
 top:0;
 opacity: 0;
 width: 100%;
 height: 100%;
}
#attachment .filename {
 font-weight: 16px;
 margin:0 0 0 10px;
}

一番重要なのは本来のinputタグをpositionで浮かせてopacityで透明にしておきます。そうすることでlabelタグをinputの代わりに装飾できるため見た目をカスタマイズすることができます。

また、今回のポイントはinputタグを「width: 100%;」、「height: 100%;」としてlabelと同じ大きさにして透明にしておくことです。そうすることによりドラッグ&ドロップに対応しているブラウザでは、本来のinputタグと同様にドラッグ&ドロップが有効になります。

ただし、横幅・縦幅を0pxなどの小さい値にしておくとドラッグ&ドロップでの読み込みが利かなくなり、クリックしてファイルを選択する形式しか有効になりません。

jQuery

これがサンプルのjQueryです。

$('#attachment .fileinput').on('change', function () {
 var file = $(this).prop('files')[0];
 $(this).closest('#attachment').find('.filename').text(file.name);
});

inputにファイルが添付されるとファイル名を取得して、指定の箇所にファイル名を挿入するという記述になります。

今回のポイント

  • labelの特性を利用してinputを見えなくしててもファイルが添付できるようにする
  • inputは不可視化するけどlabelと同じ大きさにすることでドラッグ&ドロップを有効にする(※対応しているブラウザのみ)
  • js・jQueryを利用してどのファイルを添付したのか、添付したファイル名を取得・表示する

まとめ

フォームのパーツのデザインまでこだわることができれば、よりデザインの統一感があるWEBサイトになります。またファイルのinputタグの見た目のカスタマイズは、ラジオボタン・チェックボックスと似ている部分があります。

使用頻度はあまり高くないファイル添付ですが、フォームの見た目もデザインを合わせたい際にはぜひご参考ください。

CONTACTお問い合わせ・ご相談はこちら

おすすめ記事

CONTACT

WEB戦略型ホームページ制作・
集客・ブランディングのご相談はこちら

お電話でのお問い合わせ

06-4792-7678

株式会社アルファクトリー
〒530-0047 大阪市北区西天満3-14-6
センチュリー西天満ビル4F
営業時間/平日10:00~18:00 土日祝定休
メールでのお問い合わせ

「STEP UP WEB」は大阪市北区西天満にあるアルファクトリーが
提供するホームページ制作サービスです

対応エリアは、大阪、神戸、京都をはじめ関西を中心にサポートしております。企画立案から行い、世界で最も使用されているWordPressを使用してCMSを構築し、御社専用にカスタマイズ、レスポンシブサイト(スマホ対応)として提供させていただきます。また、デザインテンプレートは一切使用せず、すべて御社に合わせオリジナルデザインで、ブランディングを行っています。

さらに、WEBサイトリニューアルや集客にお悩みの際は、コンテンツマーケティング(SEO対策)、WEBコンサルティングなどを駆使し御社ターゲットに訴求させ、収益を最大化させます。STEP UP WEBでは、コーポレート・ブランディング・採用など様々なホームページに対応しているほか、「ユーザビリティの高いサイトにしたい」「他社との差別化を行いたい」「自社で更新したい」といったクライアント様からのお悩みや目的にも寄り添い、最適なプランを企画・提案させていただきます。

ご質問・ご相談・お見積りについては、大阪の「STEP UP WEB」へお気軽にお問い合わせください。現状分析・競合分析などを踏まえてお応えさせてただきます。

制作・リニューアルをお考えの方へ
まずは無料ホームページ診断!