carrierwave の画像アップロードボタンを編集したいです。

Question

現在、railsで、carrierwaveを使って、画像のアップロードを行っています。
htmlファイルの中では、以下のように書いており、
<%= f.file_field :image %>
下の図のように表示されます。
![

このファイルを選択というボタンをbootstrapのボタンに変更したいのですが、どのように書けば良いでしょうか？

よろしくお願いします。

Answer 1

Bootstrap3では以下でBootstrapのボタン化できます。
cssでファイル選択を隠してそれらしくなっていると思います。

<span class="btn btn-default btn-file">
    Browse <input type="file">
</span>

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  background: red;
  cursor: inherit;
  display: block;
}
input[readonly] {
  background-color: white !important;
  cursor: text !important;
}

デモ