change the css of file_field?

Question

I want to change the css for file_field. Instead of showing original browse button. I want to use simple upload button to upload file.

How may i change the css of file_field and set another image on it ? So it will look like a button instead of file upload control.

Answer 1

View

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