Ruby on Rails 4とBootstrap 3スタイルでファイルを選択する方法

Question

レール4のファイル選択ボタンのスタイルを、ブートストラップが付いていても問題ありません。ユーザーがファイルをアップロードするために閲覧できる入力用のファイルフィールドを作成しました。今私はスタイルをしたいと思うし、ここで私のスタイルはレンダリングされないので問題がある。

<%= f.label :file, class: "btn btn-default btn-file" do %> 
     Import 
    <%= f.file_field :file, required: true, style: "display: none" %> 

<% end %> 

それSCSSの私のスタイル：それは私のために働いたとして

が

.btn-file { 
    position: relative; 
    overflow: hidden; 
    & 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 1

あなたは、これを試すことがあります。

HTML

Iは、入力部のために、このようにしました：

<div class="btn-box"> 
    <button class="fill-btn mar-l">Upload Audio</button> 
    <%= f.file_field :song, accept: "audio/mp3,audio/wav" %> 
</div> 

CSS：

.btn-box {position: relative;overflow: hidden; 
    input[type=file] {position: absolute;top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 100%;opacity: 0;cursor: pointer;} 
}