How in ruby on Rails 4 and Bootstrap 3 style a choose file button

Question

I'm trying to style the choose file button in Rail 4 with Bootstrap but without succces. I created my file field for the input where the user can browse to upload a file. Now I want to style and here I got issues as my style does not render.

I did in this way for the input part:

<%= f.label :file, class: "btn btn-default btn-file" do %>
        Import
    <%= f.file_field :file, required: true, style: "display: none" %>

<% end %> 

That my style in SCSS:

.btn-file {
  position: relative;
  overflow: hidden;
  & 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;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
  }
}

Answer 1

You may try this, as it worked for me:

HTML:

<div class="btn-box">
  <button class="fill-btn mar-l">Upload Audio</button>
  <%= f.file_field :song, accept: "audio/mp3,audio/wav" %>
</div>

CSS:

.btn-box {position: relative;overflow: hidden;
    input[type=file] {position: absolute;top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 100%;opacity: 0;cursor: pointer;}
}