Что бы стилизовать input file можно оформить его так:
<div class="fileup"> <label for="file-1"> <span class="wpcf7-form-control-wrap file-1"> <input type="file" name="file-1" size="40" class="wpcf7-form-control wpcf7-file" id="file-1" accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.ppt,.pptx,.odt,.avi,.ogg,.m4a,.mov,.mp3,.mp4,.mpg,.wav,.wmv" aria-invalid="false"> </span> </label> </div>
В плагине для вордпресс contact form 7 в редакторе выглядит примерно так:
<div class="fileup"> <label for="file-1"> [file file-1] </label> </div>
Скрипт добавляет класс для input file если выбран какой то файл:
<script>
jQuery(function($){
$('.wpcf7-file').on('change', function(event){
console.log('-срабатывает-');
if(event.target.files[0].name) {
console.log('-незаполнено-');
$(this).parents('label').addClass("fill");
} else {
console.log('-заполнено-');
$(this).parents('label').removeClass("fill");
}
});
});
</script>
console.log позволяет узнать что срабатывает при событии change. В данном случает изменяем инпут в плагине contact form 7 обращаясь к классу .wpcf7-file.
Примерное оформление тэга input type file:
input[type=file] {
opacity: 0;
visibility: hidden;
}
.fileup {border: 1px dashed #7E8A94; width: 70px; height: 70px;}
.fileup label {width: 100%; height: 100%; display: block; cursor: pointer;
background: url(images/fileup.svg) no-repeat center center #031c3075;
}
label.fill { background: url(images/fileup_fill.svg) no-repeat center center #031c3075; }