javascript - 更改 file_field 的 css？

Question

我想更改 file_field 的 css。而不是显示原始浏览按钮。我想使用简单的上传按钮来上传文件。

我如何更改 file_field 的 css 并在其上设置另一个图像？所以它看起来像一个按钮而不是文件上传控件。

Answer 1

查看

        <% form_tag({:controller => "controller_name", :action => "file_upload"}, {:multipart => true}) do%>
          <div class="fileinputs">
            <input type="file" name="upload" id="upload" class="file" onchange="this.form.submit();" />
            <div class="fakefile">
              <input class="upload_btn"/>
            </div>
          </div>
        <% end %>

CSS

div.fileinputs {
    position: relative;
}

div.fakefile {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

input.file {
    position: relative;
    text-align: right;
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
}

input.upload_btn {
    background:transparent url(/images/upload_btn.gif) no-repeat scroll 0px 0px ;
    width:79px;
    height:26px;
    cursor:pointer;
    border:0px;
}

input.upload_btn:hover {
    background:transparent url(/images/upload_btn.gif) no-repeat scroll 0px -40px ;
}