CODEWITHSUNDEEP
htmlcss
Fahad Saifi
Fahad Saifi

Reputation: 49

How to customise file input styles?

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:

enter image description here

Here is so far what I got:

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

Upvotes: 0

Views: 168

Answers (3)

Biplab Mahato
Biplab Mahato

Reputation: 21

  • 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>

Upvotes: 1

Hassan Siddiqui
Hassan Siddiqui

Reputation: 2845

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>

Upvotes: 1

Youssouf Oumar
Youssouf Oumar

Reputation: 45913

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>

Upvotes: 1

Related Questions