In this article, you'll learn how to create a custom choose file button using HTML and CSS. This tutorial is perfect for beginners who want to learn how to customize the look and feel of their file upload buttons. You may have seen custom choose file button in many website. In this article i show you how you can make your own custom choose file button or input tag with type="file" button using HTML and CSS.
As You can see in the below image, their is custom choose file button which we are going to make. By the end of this step by step tutorial you can make your own custom file upload button using on html and css. You'll find full source code at the end of this blog post.
First of all, let me clear that, the custom choose file button you see in the above image is not the input type file button, its a label tag. (read further for more details).
Before we start, here's the basic explaination of label tag. Because to make this custom choose file button. I have used label tag.
Basic Explaination For Custom File Upload Button:
We'll use lable tag for custom input field button. Label tag can be used for linking input tag. Once linked or bound, clicking on the label text will activate the input field, even if the input field is visually hidden using CSS styles like display: none;. This hidden input technique is often used for file uploads to maintain a consistent visual design.
Now,
how to link or bind label with input ?.
You can bind with nesting input field inside label tag OR You can add same value to label for attribute as input field id have. See below code example.
HTML
<!-- Linked -->
<label for="file"></label>
<input type="file" id="file">
<!-- Linked -->
<label>
<input type="file" id="file">
</label>
<!-- Not linked -->
<label></label>
<input type="file" id="file">
Video Tutorial on Custom Choose File Button:
Design File Upload Button.
File structure:
- Create one folder.
- Open it in your code editor.
- Create two files in that folder index.html and index.css.
Step 1 : Create basic html structure and background for upload button.
So, first create a full width background for custom file button.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 100vh;
background-color: #7a48d8;
display: flex;
align-items: center;
justify-content: center;
}
Output :
Step 2 : Add Input and Label tag.
Now add input and lable tag and bind with each other. Once bound clicking on label can open the file even if input tag is hidden.
HTML
<input type="file" id="upload">
<label for="upload">
</label>
CSS
label{
background-color: #fff;
padding: 15px 20px;
font-size: 25px;
color: #000;
cursor: pointer;
}
Output :
As you can see in the image above that their is an default choose file button and another is label tag with simple box design. Although its bound with input tag clicking on it open the file. So its ok to hide the default choose file button.
Now we'll design the label tag assuming it as an choose file button.
Step 3: Design the File Upload button (label tag).
Now let's design the file upload button with custom text and images.
HTML
<input type="file" id="upload">
<label for="upload">
<div class="box"><p>Choose File</p><img src="image/upload.png"></div>
</label>
CSS
.box{
display: flex;
}
img{
width: 25px;
margin-left: 15px;
}
Output :
Step 4: Hide Default File Upload Button.
As the label and input it bound. Clicking on label can open the file, even if default input type file is hidden. Or you can say clicking on lable is equal to click on input type file button which we bound with label.
CSS
#upload{
display: none;
}
Output :
You may like:
Final Code :
So that's it custom file upload button using HTML & CSS is ready. If you have any question or suggestion, feel free to write them in the comment section.
Share your thoughts.