Change file_field_tag appearance to button appearance

问题

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

I have this:

with this code:

= file_field_tag 'attachment'

I want something like this:

and I attempted this:

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

but I got this:

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

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

回答2:

the best way to do this is to do a transparent field using css on top of another style button. Add a div with a id and a div class wrapper on the css add the style for the button and hide the file_field_tag.

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

来源：https://stackoverflow.com/questions/31925833/change-file-field-tag-appearance-to-button-appearance