コンピュータクワガタ

かっぱのかっぱによるコンピュータ関連のサイトです

Twitter Bootstrapでファイル選択ボタンがカッコ悪い

Twitter Bootstrapを使ってみていますが、input type="file"はそのまま使うと以下の様に残念な感じになってしまいます。

f:id:kuwalab:20140102191307p:plain

Bootstrap自体始めたばかりなので、私が知らないだけかもしれませんがこれはいけてません。

何か方法があるのではないかと調べたところ、先人がいました。

Twitter Bootstrapでファイルアップロードボタンをかっこよくする方法

単純に、デフォルトのボタンを隠して処理すればいいようでしたので以下のように書いてみました。

<div class="input-group">
 <input type="text" class="form-control" id="selectedFile" readonly>
 <span class="input-group-btn">
 <button id="selectFile" class="btn btn-default" type="button">ファイル選択</button>
 </span>
</div>
$('#selectFile').on('click', function() {
  $('#file').trigger('click');
});

$('#file').change(function() {
  $('#selectedFile').val($(this).val());
});

実行結果は以下のとおりです。

f:id:kuwalab:20140102191646p:plain

MacのChromiumだとfile.val()を取得するとc:\fakepath\が追加されるので、これも取り除くとそれっぽい感じにできそうです。

もっといい方法があれば、誰か教えて下さい!

広告