前の記事 ≪:CSSでクールにデザインされた階層ドロップダウンボックス実装jQueryプ...
次の記事 ≫:2009年4月24日 管理人のブックマーク

input type=fileをCSSでクールにスタイルするサンプル

2009年04月24日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
CSS2/DOM - Styling an input type="file"

input type=fileをCSSでクールにスタイルするサンプル。
input type=fileのファイル選択ボックスをスタイルしてクロスブラウザで動作させるのはそれなりに大変そうなのですが、そのサンプルが公開されています。

綺麗にデザインされたサイトなのに、ファイルの部分だけ「参照」ってなってて普通のボタンだとかっこ悪いかもという場合にこのサンプルが使えそうです。

実際にスタイルされたボックスは以下。
ファイル名が入る部分も角丸になっていて、ボタンもなかなかクールに仕上がっています。



一応ですが覚えておくとよさそうなテクニックですね。

関連エントリ
関連の記事検索:CSS, Webデザイン, チュートリアル
スポンサード リンク

By.KJ : 2009年04月24日 11:04 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)