如何在 ruby on Rails 4 和 Bootstrap 3 中设置选择文件按钮答案

【问题标题】：How in ruby on Rails 4 and Bootstrap 3 style a choose file button如何在 ruby on Rails 4 和 Bootstrap 3 中设置选择文件按钮
【发布时间】：2018-03-11 07:16:56
【问题描述】：

我正在尝试使用 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;
  }
}

【问题讨论】：

标签： html css ruby-on-rails ruby twitter-bootstrap

【解决方案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;}
}

【讨论】：