заполнитель для ввода файла

Question

Я хочу поместить "cv" вместо "файл не выбран", я пытался добавить заполнитель для ввода файла, но он не работает

        <div class="col-md-6 form-group ">

          <input type="file" class="col form-control text-field-box mt-3" name="cv" id="files" placeholder="CV" accept="application/pdf" required />
          <label class="ml-3 " 
          style="font-size: 13px;position: absolute;top: 0px;
          font-family: 'Roboto', sans-serif;font-weight: 300;">CV</label>

        </div>

Answer 1

Способ достижения этого заключается в том, чтобы скрыть сам ввод и использовать метку как «фальшивый ввод», стилизуя его так, как вы этого хотите. У вас должен быть id на входе и для атрибута на метке (такой же, как и у идентификатора), поэтому при нажатии на метку он активирует вход. А затем с некоторыми базовыми значениями c javascript вы можете изменить содержимое метки, например, заполнитель, когда ничего не выбрано, и имя файла, когда выбрано.

Пример скрытия ввода:

    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 0.1px;
    z-index: -1;

Answer 2

Пожалуйста, внимательно проверьте мой код и дайте мне знать, если у вас есть какие-либо вопросы относительно того же. :)

Надеюсь, это поможет вам.

.file-wrapper .col.form-control{
height: 20px;
background: transparent;
border: 0;
position: absolute;
left: 0;
opacity: 0;
top: 0;
bottom: 0;
width: 100%;
z-index: 1;
}

.file-wrapper .ml-3{
font-size: 13px;
position: relative;
top: 0px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
z-index: 0;
}

<div class="col-md-6 form-group file-wrapper">

    <input type="file" class="col form-control text-field-box mt-3" name="cv" id="files" placeholder="CV" accept="application/pdf" required />
    <label class="ml-3 " 
    style="font-size: 13px;position: absolute;top: 0px;
    font-family: 'Roboto', sans-serif;font-weight: 300;">CV</label>

  </div>