andxbes

Добавляем псевдо-кнопку рядом с со скрываемым объектом  html:

<div class="file_wrap"> 
     <span class="wpcf7-form-control-wrap file-679">  
         <input name="file-679" size="40" class="wpcf7-form-control wpcf7-file" aria-invalid="false" type="file">
     </span> 
     <span class="face">theme_style.css</span>
</div>

 

Делаем размеры одинаковыми , и выдвигаем нашу псевдо-кнопку на передний план css:

.ringModal .wpcf7-form .file_wrap .file-679 >input,
.ringModal .wpcf7-form .face{
   display: block;
   height: 25px;
   width: 100%;
   z-index: 1;
   opacity: 0;
}

.ringModal .wpcf7-form .face{
    z-index:25;
    background: white;
    margin-top: -25px;
    opacity: 1;
    vertical-align: middle;
    text-align: center;
    line-height: 26px;
    
}

 

 

Меняем в  псевдо-кнопке текст по названию файла   js:

 $(".file_wrap input").change(function () {
      var fname = $(this).val();
      $(".file_wrap .face").html(fname.replace("C:\\fakepath\\", ""));
 });