Rails file_field输入作为按钮

Question

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

file_field

我正在使用关联的CSS遵循this问题中的模式：

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

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

所需的输出与隐藏的.file-input > input { display: none; } .file-input > label{ cursor: pointer; } 输入或以某种方式连接到按钮本身的输出相同。谢谢，请让我知道我是否应该发布更多代码，或者我以错误的方式考虑了此问题。

Answer 1

尝试使用此方法“隐藏”输入元素

宽度和高度设置为0.1px，而不是0px。将属性值设置为零最终会在某些浏览器中将元素抛出选项卡。和位置：绝对保证元素不会干扰同级元素。

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

Credit