MW211 EXIT

devlog
HTML/ファイルアップロードのタグ
2012年02月04日
┌──────────────────────────────────────┐
│<input type="file"/>                                                        │
└──────────────────────────────────────┘
ファイルをアップロードすることができるこのタグ。

でも、ブラウザによって見え方が違う。
以下のような感じ。
┌─────────┬───────────────────┐
│                  │┌────────────┐┌───┐│
│Internet Explorer ││                        ││参照..││
│                  │└────────────┘└───┘│
├─────────┼───────────────────┤
│                  │┌────────────┐┌───┐│
│Firefox           ││                        ││参照..││
│                  │└────────────┘└───┘│
├─────────┼───────────────────┤
│                  │┌───────┐                    │
│Chrome(Google)    ││ファイルを選択│選択されていません  │
│                  │└───────┘                    │
├─────────┼───────────────────┤
│                  │┌───────┐                    │
│Safari(Apple)     ││ファイルを選択│ファイルが未選択です│
│                  │└───────┘                    │
├─────────┼───────────────────┤
│                  │┌────────────┐┌───┐│
│Opera             ││                        ││選択..││
│                  │└────────────┘└───┘│
└─────────┴───────────────────┘

注意したいのは、Chomeなどの場合の右端。
若干隙間が空いてしまうのだ。
┌──────────────────────────────────────┐
│┌───────┐                        ┌──┐                          │
││ファイルを選択│選択されていません      │確定│                          │
│└───────┘                        └──┘                          │
└──────────────────────────────────────┘
もしも、確定ボタンとかを横に置いた場合には、一体感に欠けてしまう。

そんな時は以下のように背景色をつけてあげれば、右端の余白も塗ってくれるので、
隣接している感が復活する。
┌──────────────────────────────────────┐
│<input type="file" style="background-color:#CCCCCC;"/>                      │
└──────────────────────────────────────┘

ちなみに、最近のIEの背景色のdefaultは灰色みたいです。
分類:HTML