将file_field_tag外观更改为按钮外观 [英] Change file_field_tag appearance to button appearance

问题描述

我正在研究Rails项目，我想使用file_field_tag，但我希望它看起来像一个按钮.

I am working on a Rails project and I want to use file_field_tag but I'd like it looks like a button.

我有这个:

使用以下代码:

= file_field_tag 'attachment'

我想要这样的东西:

我尝试了这个:

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

但是我明白了:

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

How can I change the file_field_tag's appearance in order to achieve it looks like a button?

推荐答案

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;
}

这篇关于将file_field_tag外观更改为按钮外观的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！