JSFiddle - React, Tailwind, and code Playground

by Denis Tverdokhlebov

HTML

<form class="form_new_mail" action="#">
  <div class="name_lab">
    <label for='name'>От кого</label>
  </div>
  <div class="name_form">
    <input type="text" name="name" id="name">
  </div>

  <div class="theme_lab">
    <label for='name'>Тема письма</label>
  </div>
  <div class="theme_form">
    <input type="text" name="theme" id="theme">
  </div>

  <div class="message_lab">
    <label for='name'>Сообщение</label>
  </div>
  <div class="message_form">
    <textarea type="text" name="message" id="message"></textarea>
  </div>

  <div class="uploaded_file_lab">
    <label for='name'>Файл</label>
  </div>
  <div class="uploaded_file_form">
    <div class="type_file">
      <input type="file" size="28" class="inputFile" onchange='document.getElementById("fileName").value=this.value' />
      <div class="fonTypeFile"></div>
      <input type="text" class="inputFileVal" readonly="readonly" id="fileName" />
    </div>
  </div>

  <div class="btn">
    <input type="submit" value="Отправить письмо" name='submit'>
  </div>
</form>

CSS

.type_file { /* блок-родитель, внутри которого будут позиционироваться остальные элементы для реализации стильного поля выбора файлов */
position: relative;
height: 26px;
}
.inputFile { /* поле type="file" */
position: absolute; /* абсолютное позиционирование, чтобы можно было совместить поле и блок с оформлением */
top: 0;
left: 0;
z-index: 2; /* z-слой должен быть больше, чем у блока с оформлением */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); /* делаем поле абсолютно прозрачным */
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
width: 267px; /* задаем ширину для всех браузеров. Для firefox подбираем значение параметра size в поле */
}
.fonTypeFile { /* блок с оформлением */
width: 267px; /* размеры картинки для оформления */
height: 26px;
background: url(http://www.iconsearch.ru/uploads/icons/softwaredemo/48x48/circle_blue.png); /* картинка оформления поля */
position: absolute;
top: 0;
left: 0;
z-index: 1; /* z-слой меньше, чем у поля выбора файла */
}
.inputFileVal { /* поле, в котором будет показан результат выбора файла */
position: absolute;
top: 3px;
left: 5px;
z-index: 2;
width: 175px;
background: #ededed;
border: none;
}

JavaScript

function getName(str) {
  if (str.lastIndexOf('\\')) {
    var i = str.lastIndexOf('\\') + 1;
  } else {
    var i = str.lastIndexOf('/') + 1;
  }
  var filename = str.slice(i);
  var uploaded = document.getElementById("fileformlabel");
  uploaded.innerHTML = filename;
}