type=fileのinputタグを装飾する

| コメント(0) | トラックバック(0)

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

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

トラックバック(0)

トラックバックURL: http://murakya.net/mt/mt-tb.cgi/48

コメントする

オリジナルゲーム

オンラインツール