There can be situtations in which you may need to style your <input type='file'> button, so here i am going to explain few techniques to achieve this using CSS, Bootstrap and jQuery/javascript, there are already many many ways on the internet to achieve this, but we will discuss some basics and easy ways to complete it with cross browser support.

Cross browser solution to style input type='file' using pure CSS (No javascript)

Here is the source for this, HTML

<label for="file-upload" class="custom-file-upload">
     Upload
</label>
<input id="file-upload" type="file"/>

Hide the main input file type using CSS and give button css to custome button

input[type="file"] {
    display: none;
}
.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

Here is the working fiddle link https://jsfiddle.net/j27kzftr/

But the draw back of the above solution is you don't get the name of the file which is added,so let try another approach for this

Styling Input type file button using CSS and Javascript

In this approach, we will also implement javascript to get the file name on file input change, so here is the quick code for it.

HTML

<input id="uploadFile" placeholder="File Name here" disabled="disabled" />
<div class="fileUpload btn btn-primary">
    <span>Upload</span>
    <input id="uploadBtn" type="file" class="upload" />
</div>

CSS to hide the actual input and make it as a button

.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);
}

and the javascript to show file name on input type file change

document.getElementById("uploadBtn").onchange = function () {
    document.getElementById("uploadFile").value = this.value;
};

The output of the above code will be as below

input-file-type-button0styling-using-bootstrap.png

Here is the working demo fiddle https://jsfiddle.net/jzr41osq/

Please Note: I am also using Bootstrap.min.css to apply styling to button

Using Bootstrap/jQuery to style file input button

Now let's use the bootstrap way make it look better and provide you file name using jquery code, so here is the code for it.

HTML code below uses bootstrap classes to create a input group which has input type='file' but hidden and then it also creates html with input type='text' to show the browsed file names.

<div class="col-lg-6 col-sm-6 col-12">
  
            <div class="input-group">
                <label class="input-group-btn">
                    <span class="btn btn-primary">
                        Browse File <input type="file" style="display: none;" multiple>
                    </span>
                </label>
                <input type="text" class="form-control" readonly>
            </div>
           
        </div>

For the above HTML, we don't need any custom CSS, as all the styling part is already done using Bootstrap and we have made the input type="file" hidden using inline-css.

So, here is the jQuery part to get file name and append it in text control.

$(function() {

  // This code will attach `fileselect` event to all file inputs on the page
  $(document).on('change', ':file', function() {
    var input = $(this),
        numFiles = input.get(0).files ? input.get(0).files.length : 1,
        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
    input.trigger('fileselect', [numFiles, label]);
  });

  
  $(document).ready( function() {
//below code executes on file input change and append name in text control
      $(':file').on('fileselect', function(event, numFiles, label) {

          var input = $(this).parents('.input-group').find(':text'),
              log = numFiles > 1 ? numFiles + ' files selected' : label;

          if( input.length ) {
              input.val(log);
          } else {
              if( log ) alert(log);
          }

      });
  });
  
});

Executing the above code and selecting any file, will give your output as below

input-file-type-button-styling-using-bootstrap-jquery2.png

Here is the working fiddle link https://jsfiddle.net/3npgd3nz/

The above method works well in IE9 and above and in recent versions of Chrome, Safari, Firefox, and Opera.