Custom Upload Button

Question

hi i was just wondering how you can create you own custom file upload button, because the best i can do is

Answer 1

Step 1. Create a simple html markup

<div class="fileUpload btn btn-primary">
    <span>Upload</span>
    <input type="file" class="upload" />
</div>

Step 2. CSS: Tricky Part

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

For demo see here http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

Answer 2

Although some of these answers will create something that looks like you want it to work, they will break down when they try to perform the way that you expect. The file input doesn't style well directly and you will have trouble trying it. However, there is a trick.

The trick is to turn the opacity of the input to 0 and then change the background underneath it to the button style that you want.

.file_button_container,
.file_button_container input {
     height: 47px;
     width: 263px;
 }

 .file_button_container {
     background: transparent url(http://i.stack.imgur.com/BT5AB.png) left top no-repeat;
 }

 .file_button_container input {
     opacity: 0;
 }

<div class="file_button_container"><input type="file" /></div>

Answer 3

I'm too late to answer but someone surely will find this useful in future, no need to use of Javascript or Hidden field too. If you are using Bootstrap then definitely there's no need of btn CSS as well.

#upload_file 
{
    display: none;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}

.btn {
    -moz-user-select: none;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    display: inline-block;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    padding: 0.375rem 0.75rem;
    text-align: center;
    transition: color 0.15s ease-in-out 0s, background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    vertical-align: middle;
    white-space: nowrap;
}

<label for="upload_file" class="custom-file-upload btn btn-primary"><i class="fa fa-cloud-upload"></i> File Upload</label>
<input class="margin" type="file" formnovalidate id="upload_file" name="file" accept="*">

Answer 4

Use the input's label as custom upload button:

<label for="pic" class="uploadfilelabel" >upload </label>
<input type="hidden" name="MAX_FILE_SIZE" value="110000">
<input id="pic" name="pic" type="file" size="110000">

and CSS:

 label.uploadfilelabel{/*custom label here*/}
 input[type=file]{display:none;}

Notice that we did not display the main input button, because otherwise it will occupy space

Answer 5

The arrow isn't something you can "just do with code" and the rounded corners would work fine in firefox, but not in ie using css... if you just need to use a custom image it's easy:

css:

#my_upload_button{
  background-image:url(path-to-file.png);
  border:none;
}

Answer 6

I think you can also try doing it this way:
Creating an additional <label for="X"></label> element which you can style easily with CSS

<div class="container">
  <label for="upload" class="uploadButton">Upload</label>
  <input type="file" name="upload" id="upload">
</div>

like

.container {
  position: relative;
}
.uploadButton {
  height: 25px;
  width: 66px;
  display: block;
  cursor: pointer;
  background: url('http://www.ifunia.com/images/christmas/youtube-upload-button.gif') center center no-repeat;
}
input[type="file"] {
  display: block;
  width: 66px;
  height: 25px;
  clip: rect(0px 0px 0px 0px);
  position: absolute;
  left: 0;
  top: 0;
}

<form>
  <div class="container">
    <label for="upload" class="uploadButton"></label>
    <input type="file" name="upload" id="upload" required />
  </div>
  <hr/>
  <button type="submit">Submit</button>
</form>