【Rails】ファイル投稿ボタンをカスタマイズ（備忘録）

ファイルを投稿するボタンをカスタマイズする方法を残しておきます。

元の記述

new.html.erb

＃省略
    <div class="field">
        <%= f.label :画像 %>
        <%= f.file_field :image %>
   </div>
＃省略

変更後

new.html.erb

＃省略
<div class="label-box__inner">
    <label class="mealpicture">料理画像
        <%= f.file_field :image ,class:"input-default" %>
        <div class="boxFileSelect"></div>
    </label>
</div>
＃省略

SCSS

.label-box__inner{
 padding: 10px 20px 10px 20px;
  .input-default{
    display: none;
    width: 100%;
    height: 40px;
    margin: auto;
    padding: 10px 16px 8px;
    border-radius:4px;
    background: #fff;
    line-height: 1.5;
    cursor: pointer;
    outline-width: 2px;
   }
}

以上です。
お好みに合わせてCSSの値をいじったり、ラベルの文字をいじってください。