2013年2月アーカイブ

サイトのユーザーインターフェースをデザインする上でちょっと困るのがtype=fileのinputタグだと思います。
ブラウザごとに見た目が違うし、CSSでも思い通りに変更できません。
ということで、挑戦してみました。

ポイントはinputタグを見えなくしlabelタグを装飾しているのですが、inputタグを"display:none"にしてしまうとOperaで動かなくなってしまうので、サイズを0にしています。
また、type=fileはFirefoxだとlabelタグクリックでは反応しないので、javascriptを使ってクリックイベントを発生させています。
ぶっちゃけこれのせいでlabelタグを使う必要性はなくなってますけどね(^^;
これでIE9、Chrome24、Firefox18、Opera12で動作しました。

オリジナルゲーム

オンラインツール