こんにちは、Sonicmoov勤続5年弱のだってぃです。
いや~時がながれるのって本当に早いですね。
すっかりお局・・・いや、お局の男バージョンの言葉ってないんですかね?
まぁいい。別にお局でもいいや。
人生絶賛迷子中です。

気が付けば前回の記事「select要素を装飾するいくつかの方法」を書いてから1年半たっていますね。
・・・あれ?弊社のこのLab、人数的に考えて、半年に1度くらいは回ってくるはず
・・・ うん、まぁよしとしよう。もみ消そう!HAHAHA!

はい、今日は前回に引き続きフォーム関連要素の装飾のお話。
あの不可侵領域、input要素のtype=”file”の装飾方法をチェケラします。
デザイン変更できちゃうんですよ、実は。

ん?タイトル横の画像と内容が関係ないって?
はい、だって、ほら、input type=”file”っぽい画像って何?って感じですし。
でもアイキャッチ的な画像はあった方がいいって、たくさんの偉い人達が言ってますし。
しょうがないね。

まぁそれはいいとして、
図1

図2
になっちゃうんですよ!
素敵!!!!

その1.
Javascriptでinput type=”file”要素のイベントを・・・する方法

とりあえずデモを見てみる

結論からいいます、この方法はダメです。
なぜならばIEで動かない。
いや、一見動いているようにみえて実は・・・
フォーム送信されたときに値が入ってこない!!!

No more IE!!
No more IE!!!!

・・・・まぁでもこの方法の方が、楽ちん(そうか?)だし、まっとうな方法だと思うので、紹介するだけしておきます。

続きを読む

ざっくり手順

  1. 「ダミーとなるテキストフィールド(readonly)とボタン」実体となるinput type=”file”を配置。
  2. input type=”file”を非表示(display=”none”)
  3. javascriptでボタンと実体のクリックイベントをつなぎこみ

まぁ実際は値を取る手順があるのですが、考え方だけなら上記のとおりです。
あとはソースを見てもらった方が早い。
いや、違う、面倒くさいとかそうじゃなくて・・・そうじゃなくて・・・
はい、以下。

HTML

※わかりやすいように余計なタグはいれてません。

CSS

※わかりやすいように装飾系の指定はいれてません。

Javascript

※jQuery使ってます。

※jsはパパっと適当に書いたので、導入の際は自己流でやってみたほうがいいかも☆

実際に動いているものを見てみる

その2.
input type=”file”を透明にして上にかぶちゃう

とりあえずデモを見てみる

はい、こちらが本命。
本命の情報を後にもってきてしまった。
じらしテク。

ざっくり手順

  1. ダミーとなるテキストフィールド(readonly)とボタン、実体となるinput type=”file”を配置。
  2. ラッパーのdivをposition:relativeにして、適切な幅(デザイン依存)指定
  3. input type=”file”を絶対配置(position:absolute)にして、幅・高さを100%にしてラッパーのdivを覆い、透明化
  4. javascriptでinput type=”file”のonchangeイベントを拾い、ダミーのテキストフィールドに値をセット。

HTML

とりあえずHTMLはこんなん。
※その1と同じものです。

CSS

つぎにCSS・・・

これでいいはずだった・・・
そう・・・あいつさえいなければ・・・・
・・・・IE!!!

No more IE!!
No more IE!!!!

さて、IEの何が問題かというのを順を追ってみていきましょう。
まず、わかりやすいように上記のCSSの状態でopacity:0をとったものをIEでみてみましょう。

図3

おぉ・・・しっかりきっちりラッパーのdivに覆いかぶさって表示されてますね(わかりにくいけど)。

でも・・・でもね・・・・

img04

なんてこったい!!!!
なんで!なんでだよ、IE!!!!
ちなみにダブルクリックすれば、エクスプローラーが立ち上がります。
なんなんだその仕様。

てなわけで、IEは幅を指定しただけでは対応ができないんですよ、困ったことに。

さて、この問題をどう解決するかといいますと。
それは、ずばり!
font-size
です。

では実際にCSSを書き換えてみましょう。

これをIEで見ると。

図5

わかりにくいですが、確かに拡大されてます。
参照ってボタンの上がちょっと見えてるので、それでわかると思います。

ここでは、わかりやすいように80pxとしましたが、それだとまだクリックで反応しない部分が、かぶってきてしまっています。
なので、ここは思い切ってラッパーのdivの幅くらいのfont-sizeを指定してしまいましょう。
思いきり、大事。
人生と一緒ですね。

まさかのIEの壁を乗り越えた完全版CSSソースが以下!

これで、CSSはOKです。
細かい部分は要件によって変えてくださいませ。

Javascript

最後にjavascriptはまぁちゃちゃっと。
その1と違うのは実体のonchangeでやってるってことですかね。

※jsはパパっと適当に書いたので(ry

実際に動いているものを見てみる

おわりに

なんというか、やはり時代が流れようともIEとの泥臭い戦いは終わらないわけで。
XPのサポートが打ち切られても、IE8を完全に無視できるようになるのはいつの日か・・・
まぁ頑張っていきましょうねてなことで。

あと3か月でアラフォー突入のだってぃがお伝えしました~。
またいつか~~~~☆ミ

・・・・アラフォー・・・・(´・ω・`)

あわせて読みたい記事