html - 如何在 Ruby on Rails 4 和 Bootstrap 3 中设置选择文件按钮的样式

Question

我正在尝试使用 Bootstrap 在 Rail 4 中设置选择文件按钮的样式，但没有成功。我为输入创建了文件字段，用户可以在其中浏览以上传文件。现在我想要设计样式，但我遇到了问题，因为我的样式无法呈现。

输入部分我是这样做的:

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

<% end %> 

我在 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

你可以试试这个，因为它对我有用:

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