Bootstrapでかっこいいファイル選択フォームをつくる - totakke blog

Twitter Bootstrapは全体的にクールですが、ファイル選択フォームがデフォルトのため少し残念です。ここでは、Bootstrapの他のコンポーネントを組み合わせてかっこいいファイル選択フォームをつくる方法を紹介します。 その選択フォームをつくるHTMLは以下のようなものです。 <input type="file" id="file-input" name="file" style="display: none;"> <div class="input-prepend"> <a class="btn" onclick="$('#file-input').click()"><i class="icon-folder-open"></i></a> <span id="cover" class="input-xlarge uneditable-input">select file</sp

[watanata2000]

file upload デザインカスタマイズ

[chitoku_k]

input type="file" のデザイン

[ruirui_0923]

“<input type="file" id="file-input" name="file" style="display: none;"> <div class="input-prepend"> <a class="btn" onclick="$('#file-input').click();"><i class="icon-folder-open"></i></a> <span id="cover" class="input-xlarge uneditable-input">select file</span> </div>”