Как изменить input type file?

Question

Подскажите как убирается стандартное отображение type=file = Выберите файл/файл не выбран, а оставить мои стили = Загрузить файл.

.feedback__text {
        margin-bottom: 7px;
        font-family: Montserrat;
        font-size: 16px;
        font-weight: 600;
        color: #282828;
}


.feedback__file {
  
}

.feedback__file:before {
            content: "Загрузить файл";
            cursor: pointer;
            width: 132px;
            height: 32px;
            margin: 11px 0 0;
            padding: 8px 20px 7px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
            background-color: #f5f6f7;
            font-family: OpenSans;
            font-size: 12px;
            text-align: center;
            color: #282828;
}

<p class="feedback__text">Документы</p>
<label for="file" class="feedback__label"></label>
<input type="file"  id="file" class="feedback__file">

Answer 1

.feedback__text {
  margin-bottom: 7px;
  font-family: Montserrat;
  font-size: 16px;
  font-weight: 600;
  color: #282828;
}

.feedback__label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 132px;
  height: 32px;
  margin: 11px 0 0;
  padding: 8px 20px 7px;
  border-radius: 5px;
  font-family: OpenSans;
  font-size: 12px;
  text-align: center;
  background-color: #f5f6f7;
  color: #282828;
  cursor: pointer;
}

.feedback__file {
  display: none;
}

<p class="feedback__text">Документы</p>
<label class="feedback__label">
  Загрузить файл
  <input type="file" id="file_in" class="feedback__file">
</label>

<!-- Или так... -->

<p class="feedback__text">Документы</p>
<label for="file_out" class="feedback__label">Загрузить файл</label>
<input type="file" id="file_out" class="feedback__file">

БЛОГ НА HUSL

Как изменить input type file?

Ответы (1 шт):