How to customise file input styles? - html

Question

I have to make a file input field where a user has to click to open the files explorer and select his résumé. It should look like this:
Here is so far what I got:
<input type="file" name="mobile_num" placeholder="Attach Resume" required>

Answer 1

File input is one of those html elements that it is hard to control the style, every browser has its particular way with it. But there are some techniques to use, and here is one of them :
.group {
position: relative;
}
.group .btn {
pointer-events: none;
text-align: left;
background-color: transparent;
border: 1px solid gray;
padding: 0.5rem;
width: 100%;
border-raduis: 5px;
}
.group input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
<div class="group">
<button class="btn">Attach Resume</button>
<input type="file" name="mobile_num" placeholder="Attach Resume" required>
</div>

Answer 2

Add label element and use for attribute will resolve your issue. I also update code snippet, I hope it'll help you out. Thank you
.group {
position: relative;
}
.group .btn {
pointer-events: none;
text-align: left;
background-color: transparent;
border: 1px solid gray;
padding: 0.5rem;
width: 100%;
border-raduis: 5px;
}
.group input {
display: none;
}
.group label {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
<div class="group">
<button class="btn">Attach Resume</button>
<label for="mobile_num"></label>
<input id="mobile_num" type="file" name="mobile_num" placeholder="Attach Resume" required>
</div>

Answer 3

Step 1: Add a label tag as the parent of your file input
Step 2: Add some CSS to hide the default file input and display the
label as per your reference image
.file_input_btn {
display: block;
border: 1px solid grey;
border-radius: 5px;
width: 100%;
height: 45px;
font-size: 16px;
color: grey;
line-height: 45px;
padding-left: 10px;
}
.file_input_btn input {
display: none
}
<label for="file_input" class="file_input_btn">
Attach Resume
<input type="file" id="file_input" name="mobile_num" required>
</label>