How to remove No file Choosen from input type file
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>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>