How to style a HTML file upload button using only CSS?

Here is a simple solution to change the style of HTML file upload button:

Output:

CSS:

 .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);
        }
 .filePathStyle {
 border: 2px solid #afabab;
 border-radius:4px;
 width:150px;
 padding-top:6px;
 width :300px !important;
 }
 .uploadButton {
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 background-color: grey  !important;
 border-color: grey !important;
 color: white;
 min-width:25px;
 }

HTML Controls:

  

<div style="clear: both;">
      <div style="float: left;padding-top:12px;">
        <input id="uploadFile" disabled="disabled" placeholder="Choose File" class="filePathStyle"/>
      </div>

      <div class="fileUpload btn btn-primary" style="float:left;">
        <input type="button" value="..." class="uploadButton"/>
        <input id="uploadBtn" onchange="GetFilePath(this);" type="file" class="upload" accept="*" />
      </div>
  </div>  

JavaScript Functions:

Function to set file path-

GetFilePath = function (control) {
   document.getElementById("uploadFile").value = control.value;
};

Function to prepare file data for uploading-

function uploadFileData() {

var fileInput = $('#uploadBtn');
var fileContent = fileInput[0].files[0];
var reader = new FileReader();
reader.onload = function (result) {
    var fileName = '',
     libraryName = '',
     fileData = '';

    var byteArray = new Uint8Array(result.target.result)
    for (var i = 0; i < byteArray.byteLength; i++) {
        fileData += String.fromCharCode(byteArray[i])
    }

    // once we have the file perform the upload
    fileUploadFunction(fileContent.name.split('.')[1], fileData);

};
reader.readAsArrayBuffer(fileContent);

}

function fileUploadFunction(fileName, docLibraryName, folderName, fileData) {
        var url;
    // if there is no folder name then just upload to the root folder
    if (folderName == "") {
        url = appurl + "/_api/SP.AppContextSite(@TargetSite)/web/lists/getByTitle(@TargetLibrary)/RootFolder/Files/add(url=@TargetFileName,overwrite='true')?" +
            "@TargetSite='" + hosturl + "'" +
            "&@TargetLibrary='" + docLibraryName + "'" +
            "&@TargetFileName='" + fileName + "'";
    }
    else {
        //// if there is a folder name then upload into this folder
        url = appurl + "/_api/SP.AppContextSite(@TargetSite)/web/lists/getByTitle(@TargetLibrary)/RootFolder/folders(@TargetFolderName)/files/add(url=@TargetFileName,overwrite='true')?" +
           "@TargetSite='" + hosturl + "'" +
           "&@TargetLibrary='" + docLibraryName + "'" +
           "&@TargetFolderName='" + folderName + "'" +
           "&@TargetFileName='" + fileName + "'";
    }

    // use the request executor (cross domain library) to perform the upload
    var reqExecutor = new SP.RequestExecutor(appurl);
    reqExecutor.executeAsync({
        url: url,
        method: "POST",
        headers: {
            "Accept": "application/json; odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val() //digest
        },
        contentType: "application/json;odata=verbose",
        binaryStringRequestBody: true,
        body: fileData,
        processData: false,
        success: onfileUploadSuccess,
        error: onfileUploadFailure
    });
}
function onfileUploadSuccess(data) {
    var jsonobject = JSON.parse(data.body);
    updateListItem(jsonobject.d.Name);
}
function onfileUploadFailure(sender, args) {
    alert('Failed to upload image: ' + args.get_message());
    try {
           } catch (err) { }
}