Adding style to file upload button in css

Question

I have a text field and button with following css:

JS fiddle link : http://jsfiddle.net/Tdkre/

.submit {
      -moz-box-shadow:inset 0px 1px 0px 0px         


        

Answer 1

I run this relatively short jQuery on my page that contains one or more unaltered html elements.

The jQuery will hide the elements and insert new ones where appropriate that mimic the same behaviour.

This answer is similar to others on the page but has been tested in IE browsers as well as the ones whose developer's actually take the time to support carefully considered web standards.

$(document).ready(function(){

  // replace all file upload elements for styling purposes
  $('input[type="file"]').each(function(){
    var btn = $('Browse...');
    var txt = $('');
    $(this).after(txt).after(btn);
    $(this).css({display:'none'});
    var target = this;
    $(btn).click(function(ev){ 
      ev.preventDefault(); 
      $(target).click(); 
    })
    $(target).change(function(){
      // IE uses a stupid renaming scheme that includes "fake-path"
      var fname = $(target).val()
      $(txt).html(fname.substr(fname.lastIndexOf('\\')+1));
    });
  });
});

Now you just need to style button.file and span.file as you like and you are good to go.