Как убрать надпись “Файл не выбран” и оставить только кнопку «Выберите файл»?

Question

[Денис Крашенинников]

Просто убрать надпись "Файл не выбран", при этом оставить кнопку.
Пробовал выставить display: none, убирает и кнопку, и надпись.

Answer 1

[Сергей Романенко]

HTML
<input type="file" class="custom-file-input">

CSS

.custom-file-input {
  color: transparent;
}
.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'Файл не выбран';
  color: black;
  display: inline-block;
  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
}
.custom-file-input:hover::before {
  border-color: black;
}
.custom-file-input:active {
  outline: 0;
}
.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9); 
}

https://codepen.io/Awilum/pen/WNoExOG

Comments

[Шигаев.]

Тогда пропадает счётчик «Файл не выбран». Как его вернуть?