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 tried this it looks pretty good to me. Are there any flaws with this? Here is the jsfiddle link http://jsfiddle.net/Tdkre/1/

#FileUpload {
    position:relative;
}

#BrowserVisible {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    background:url(upload.png) 100% 1px no-repeat;
    width:345px;
    height:30px;
}

#FileField {
    width:250px;
    margin-right:85px;
    padding: 6px;
    font-size: 13px;
    background: #fff url('bg-form-field.gif') top left repeat-x;
    border: 1px solid #d5d5d5;
    color: #333;
    border-radius: 4px 4px 4px 4px !important;
}

#BrowserHidden {
    position:relative;
    width:345px;
    height:30px;
    text-align: right;
    -moz-opacity:0;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 2; 
}

<div id="FileUpload">
<input type="file" size="24" id="BrowserHidden" onchange="getElementById('FileField').value = getElementById('BrowserHidden').value;" />
<div id="BrowserVisible"><input type="text" id="FileField" /></div>

Here are the images

Answer 2

Simple Solution: Custom file upload button with css only

.fileUpload input[type=file]{
                display:none;
            }
            .btn{
                background-color:#e3e3e3;
                color:#333;
                border:1px solid #e6e6e6;
                border-radius:3px;
                padding:6px 12px;
                font-size:16px;
            }

<label class="btn fileUpload btn-default">
       Browse <input type="file" hidden="">
</label>

Answer 3

It is notoriously hard to style file upload buttons, but if you are willing to use jQuery and a plugin I've found this one to be very useful.

It gives you the posibility to "fake" file upload button functionality on any DOM element, so you can style it any way you want. Works well in all major browsers including old IE versions.

Answer 4

try this:

In your css file put this on the end of file or somewhere else: input[type="file"]::-webkit-file-upload-button. This syntax is only for button style.

If you put there only: input[type="file"] you can style the array where you have filename.

Answer 5

Try this solution: http://jsfiddle.net/JJRrc/1/

Html

<p class="form">
  <input type="text" id="path" />
  <label class="add-photo-btn">upload
    <span>
       <input type="file" id="myfile" name="myfile" />
    </span>
  </label>
</p>

CSS

.form input[type="file"]{
  z-index: 999;
  line-height: 0;
  font-size: 50px;
  position: absolute;
  opacity: 0;
  filter: alpha(opacity = 0);-ms-filter: "alpha(opacity=0)";
  cursor: pointer;
  _cursor: hand;
  margin: 0;
  padding:0;
  left:0;
  }
 .add-photo-btn{
   position:relative;
   overflow:hidden;
   cursor:pointer;
   text-align:center;
   background-color:#83b81a;
   color:#fff;
   display:block;
   width:197px;
   height:31px;
   font-size:18px;
   line-height:30px;
   float:left;
 }
 input[type="text"]{
   float:left;
 }

JQuery

$('#myfile').change(function(){
  $('#path').val($(this).val());
});

Answer 6

I run this relatively short jQuery on my page that contains one or more unaltered html <input type="file"> 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 = $('<button class="file">Browse...</button>');
    var txt = $('<span class="file"></span>');
    $(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.