我有一个按钮，我想执行由 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 输入相同。谢谢，如果我应该发布更多代码或者我以错误的方式考虑这个问题，请告诉我。

请您参考如下方法:

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

宽度和高度设置为 0.1px 而不是 0px。在某些浏览器中，将属性值设置为零最终会使该元素脱离选项卡派对。 position: absolute 保证元素不会干扰兄弟元素。

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

Credit