Добавляем псевдо-кнопку рядом с со скрываемым объектом html:
1 2 3 4 5 6 | <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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .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:
1 2 3 4 | $(".file_wrap input").change(function () { var fname = $(this).val(); $(".file_wrap .face").html(fname.replace("C:\\fakepath\\", "")); }); |