Rails file_field 输入为按钮

Question

我有一个按钮，我想执行由 Rails 中的file_field 生成的操作。这是我现在拥有的 erb 代码：

<label for='file-input'>
  <span class='btn btn-success' style='max-width: 300px;'>
    <img src=<%= image_path('button-upload-white.svg')%>></img> Upload from computer
  </span>
</label>

<%= f.file_field :files, multiple: true, name: 'attachment[file]', id: 'file-input'%>

我遵循this 问题中的模式以及相关的 CSS：

.file-input > input
{
 display: none;
}

.file-input > label{
  cursor: pointer;
}

但它似乎不起作用并生成以下内容：

所需的输出将与隐藏的choose files 输入相同或以某种方式连接到按钮本身。谢谢，如果我应该发布更多代码或者我正在以错误的方式考虑这个问题，请告诉我。

Answer 1

试试这个来“隐藏”输入元素

宽度和高度设置为 0.1 像素，而不仅仅是 0 像素。将属性值设置为零最终会在某些浏览器中将元素从标签方中抛出。并且 position: absolute 保证元素不会干扰兄弟元素。

  .file-input > input {
        width: 0.1px;
        height: 0.1px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        z-index: -1;
    }

Credit