タグ

ブックマーク / me.hateblo.jp (1)

  • input type="file"をCSS3で装飾 改善版 IE7〜対応。 - with the flow

    すごく昔に書いた、input type="file"をCSSJavaScriptで綺麗に装飾するものの改善版を作りました。 Chrome23.0.1, Firefox17, Opera12, IE9,8,7で正常に表示されるのを確認。 ■内容 ・「参照」ボタンを押しても、textboxを押しても参照ダイアログが起動。 ・ファイルを参照するとtextbox内にファイル名が入る。ファイル名が長い場合は「...」と省略される。 ・「アップロード」ボタンがあった場合で作ってみた。押しても何も起こりませんが。 ・画面内に複数入れたい場合は、"uploader"を複数入れることで対応可能。 ・JavaScriptが無効な状態にも対応。無効な環境では普通のブラウザデフォルトのinput type="file"が出現し、  アップロードボタンの左に並びます。 IEは画像作ってないので必要であれば足してく

    input type="file"をCSS3で装飾 改善版 IE7〜対応。 - with the flow
    yamadar
    yamadar 2014/09/04
    見えないボタンをJSでクリックしたり、透明にしたボタンを装飾した要素の上から重ねたり。
  • 1