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'%>

我在关注CSS的this问题中遵循了这个模式：

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

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

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

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

Answer 1

试试这个'隐藏'输入元素

宽度和高度设置为0.1px而不是仅0px。将属性值设置为零最终会在某些浏览器中将元素从标签方中抛出。和位置：绝对保证元素不会干扰兄弟元素。

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

Credit