将file_field_tag外观更改为按钮外观

Question

我正在开发一个Rails项目，我想使用file_field_tag，但我希望它看起来像一个按钮。

我有这个：

使用此代码：

= file_field_tag 'attachment'

我想要这样的事情：

我试过这个：

= file_field_tag 'attachment', class: 'btn btn-large btn-warning'

但我得到了这个：

如何更改file_field_tag的外观以使其看起来像一个按钮？

Answer 1

HTML：

<span class="btn btn-large btn-warning btn-file">
    Choose File
    <%= file_field_tag :attachment %>
</span>

CSS：

.btn-file {
    position: relative;
    overflow: hidden;
}

.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

Answer 2

执行此操作的最佳方法是使用另一个样式按钮顶部的css执行透明字段。 在css上添加一个带id和div类包装的div，添加按钮的样式并隐藏file_field_tag。

<div id="id_attachment">
   <div class="hide_attachment">
     <%= file_field_tag 'attachment'%>
   </div>
</div>

Answer 3

对于顺风用户来说，这对我有用。

<label class="relative flex justify-center w-full px-4 py-2 overflow-hidden text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 hover:bg-blue-700">
 Upload logo
 <%= f.file_field :main_image, class:"absolute top-0 right-0 opacity-0 cursor-pointer min-h-full min-w-full" %>
</label>