Custom File Upload Button using CSS only

This tutorial will help to teach you how File upload button styled beautifully,  Bootstrap 4 comes with customized form elements, that are meant to replace browser defaults.

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

We can customize the input field and buttons. Here we are using the simple CSS code, that customized upload buttons will work as a normal upload button.  Always default upload button is not looking good. So when you wants to customize the upload button as you want.  Most of the cases will customize the upload button in different types of ways. We can also implement drag and drop file customization using jquery.

The <input type=”file”> defines a file-select field and a “Browse” button for file uploads.
The input element, having the “file” value in its type attribute, represents a file upload button. The control associated with this file upload button that allows users to upload a file.

A file upload field that accepts multiple values. The multiple attributes is a boolean attribute.it specifies that the user is allowed to enter more than one value in the <input> element. To define a file-select field that allows multiple files to be selected, add the “multiple” attribute.
To create a custom file upload, wrap a container element with a class of .inputfile, .upload_ul around the input with type=”file”. Then add the .inputfile-4 to it. If you use labels for accompanying text, add the .file-5 class to it.
if you want the name of the file to appear when you select a specific file then we have to include jQuery 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