css - 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.1px 而不是 0px。在某些浏览器中，将属性值设置为零最终会使该元素脱离选项卡派对。 position: absolute 保证元素不会干扰兄弟元素。

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

Credit