Custom File Upload Button using CSS only

Customize File Upload HTML and CSS Code has given below , You can modify own style with Your existing code

HTML

<input type="file" name="file-5[]" id="file-5" class="inputfile inputfile-4 upload_ul" data-multiple-caption="{count} files selected" multiple />
<label for="file-5">
<figure><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z" /></svg></figure>
</label>

 

CSS

.upload_ul {
position: absolute;
width: 0.1px;
}
.upload_ul + label{cursor:pointer;}
.inputfile-4 + label figure {
width: 100px;
height: 100px;
border: 1px solid #b5b0b0;
display: block;
padding: 20px;
background: #f5f5f5;
border-style: dotted;
}
.inputfile-4 + label svg {
width: 100%;
margin-top: 15px;
}
.upload label{background:none;color:#000;}

 

upload image
upload image