Style input type "file" in modern browsers

Question

I want to ask how to style an input fields type='file' in 2019? I see a lot of questions and answers but almost all of them requires jQuery and we know that jQuery is not as popular as it was 10 years ago. I want to add some icons as buttons and I know there are many libraries that can bring you a completely finished input fields but it's not the point I want to do but I want to learn how to customize and style my own input field type='file'.

Styling an input type="file" button

How to do that kind of input field with showing files that are being updated in 2019?

In fact the `input[type="file"]` is not customizable. You'll need a `label` to do the trick. — ThS, Jul 05 '19 at 17:30

score 1 · Accepted Answer · answered Jul 05 '19 at 18:13

As I said in the comments section, you'll need a label tag, along with some CSS, to do the trick. Indeed, you'll need JavaScript to bring life to your UI.

So, here I'm making a demo for you :

const inputFile = document.querySelector('.my-file'),
  label = document.querySelector('.custom-input'),
  icon = label.querySelector('.label-icon'),
  text = label.querySelector('.label-text');
inputFile.addEventListener('change', () => {
  text.textContent = 'Please, choose a file.';
  if (inputFile.files.length === 1) {
    text.textContent = inputFile.files[0].name.toUpperCase();
    text.classList.add('attached');
    icon.classList.add('attached');
  } else {
    text.classList.remove('attached');
    icon.classList.remove('attached');
  }
});

.container {
  padding: 12px 6px;
  background-color: #f6f6f6;
}

.wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  border: 1px solid #dedede;
  border-radius: 6px;
  overflow: hidden;
}

.wrapper .my-file {
  display: none;
}

.wrapper .custom-input {
  background-color: #fff;
  flex: 1;
  cursor: pointer;
}

.wrapper .custom-input .label-icon {
  display: inline-block;
  padding: 15px;
  background-color: #fde4af;
  color: #181818;
  transition: all .4s 0s ease;
}

.wrapper .custom-input .label-icon.attached {
  background-color: #e6ac2d;
  color: #fff;
}

.wrapper .custom-input .label-icon.attached > .fa {
  text-shadow: 0 0 15px rgba(24, 24, 24, .35);
}

.wrapper .custom-input .label-text {
  display: inline-block;
  padding: 4px;
  transition: all .4s 0s ease;
}

.wrapper .custom-input .label-text.attached {
  font-weight: 600;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" />
<div class="container">
  <form action="#" id="my-form">
    <div class="wrapper">
      <input type="file" id="my-file" name="my-file" class="my-file" />
      <label for="my-file" class="custom-input">
      <span class="label-icon">
        <i class="fa fa-folder"></i>
      </span>
      <span class="label-text">Please, choose a file.</span>
    </label>
    </div>
  </form>
</div>

Hope I pushed you further and am here for any further explanations.

Style input type "file" in modern browsers

1 Answers1