Change the look of input[type="file"]

[ben]

Just a quick one, code only! To change the file input to something like this:

Copy and paste the following codes:

HTML:

<div class="input-file-button-wrap">
    <label for="input1" class="input-file-button">Image upload</label>
    <input type="file" class="form-control" id="input1" name="input1" aria-describedby="input1_help">
</div>

CSS:

.input-file-button-wrap {
    position: relative;
}
input[type="file"] {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
}
.input-file-button {
    display: inline-block;
    cursor: pointer;
    border-radius: 3px 0 0 3px;
    border: 1px solid #CED4DA;
    border-right: none;
    padding: 6px;
    color: white;
    background-color: blue;
    width: 113px;
    box-sizing: border-box;
}

Change label text and colours to suit.