How to Style the Input File Type in Forms using CSS?
Last Updated :
30 Jul, 2024
Customizing the style of file input elements in web forms is essential to enhance the visual appeal of a website. Employing techniques such as CSS styling and the ::file-selector-button to achieve a visually appealing file upload experience. These methods allow for the customization of various design elements, such as padding, border, and font.
In this approach, This ::file-selector-button offers limited styling capabilities but works across most browsers. It targets the button that opens the file selection dialog. This code uses the '::file-selector-button' pseudo-element to style the file input button in forms, giving it a green background, white text, padding, rounded corners, and a pointer cursor.
Note: Limited properties can be applied (background, color, padding, etc.). Doesn't allow styling text within the button.
Example 1: In the below example styling the input file type in forms using the ::file-selector-button pseudo-element.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Styled File Input (1st Approach)</title>
<style>
input[type="file"]::file-selector-button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<form>
<label for="fileInput">
Upload a File:
</label>
<input type="file" id="fileInput">
</form>
</body>
</html>
Output:
Example 2: In the below example Styling the input file type in forms using CSS, links the file input and custom button to event listeners, triggering a simulated click on the hidden file input when the custom button is clicked.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Styled File Upload</title>
<style>
.custom-file-upload {
position: relative;
display: inline-block;
}
.custom-file-upload button {
padding: 10px 20px;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
overflow: hidden;
text-align: left;
transition: background-color 0.2s ease-in-out;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
font-family: 'Roboto', sans-serif;
}
.custom-file-upload button:hover {
background-color: #388e3c;
}
.custom-file-upload button::before {
content: "\f0e4";
font-family: FontAwesome;
margin-right: 5px;
}
.custom-file-upload input[type="file"]
::-webkit-file-name-text {
color: black;
}
</style>
</head>
<body>
<div class="custom-file-upload">
<input type="file" id="fileInput"
style="opacity: 0;">
<button>Choose File</button>
</div>
<script>
const fileInput =
document.getElementById('fileInput');
const customButton =
document.querySelector('.custom-file-upload button');
customButton.addEventListener('click', () => {
fileInput.click();
});
</script>
</body>
</html>
Output:
Similar Reads
How to specify the type of an input element using HTML ? In this article, we will specify the type of an input element using HTML. The HTML <input> type attribute is used to specify the type of <input> element to display. The default type of <input> type attribute is text. Syntax: <input type="value"> Attribute Values: button: It i
4 min read
How to Display the file format of links using CSS ? In this article, we will explain the approach to display the file formats on a webpage. Many times while browsing, we need to download a document file but in PDF format, however, a problem might occur that multiple links of downloading the file are there, but each link contains different file format
2 min read
What is the Limit File Format when using <input type="file"> ? In this article, we will learn how to limit file format when using HTML input tags. By using Hypertext markup language(HTML) language, we cannot restrict any users to choose any type of file from the browser (developed by the developer). But, we can apply some limitations by using <input type="fi
3 min read
How to Select Multiple Files using HTML Input Tag ? Using the input tag to upload multiple files has become possible after the release of HTML 5. Since many of us, work on HTML and still use tags such as <input> tag for taking input from the user and <form> tag for using forms on our website, it is necessary to know how to implement multi
2 min read
How to set a value to an input file using HTML? In HTML, we will use the type attribute to take input in a form and when we have to take the file as an input, the file value of the type attribute allows us to define an element for the file uploads. It displays a browse button on our computer screen, and when we click on it, it asks the user for p
2 min read
How to set a value to an input file using HTML? In HTML, we will use the type attribute to take input in a form and when we have to take the file as an input, the file value of the type attribute allows us to define an element for the file uploads. It displays a browse button on our computer screen, and when we click on it, it asks the user for p
2 min read