How to remove No file Choosen from input type file-CodePudding

<input type="file" name="mobile_num" placeholder="Attach Resume" required>

Hey community I have to make a input file field where a user have to click the field and the explorer will open and then a user have selec his resume.Ihave to make the input field like this image

CodePudding user response：

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 >
  <button >Attach Resume</button>
  <input type="file" name="mobile_num" placeholder="Attach Resume" required>
</div>

CodePudding user response：

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 >
  <button >Attach Resume</button>
  <label for="mobile_num"></label>
  <input id="mobile_num" type="file" name="mobile_num" placeholder="Attach Resume" required>
</div>

CodePudding user response：

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" >
  Attach Resume
<input type="file" id="file_input" name="mobile_num" required>
</label>