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());
});