Добавляем псевдо-кнопку рядом с со скрываемым объектом 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\\", "")); });