Я пытаюсь заменить этот старый входной файл чем-то современным, созданным мной в скрипке. Однако, поскольку я использую контактную форму WP 7, она интегрирована в тему, и единственный способ ее редактировать - использовать этот код -
<label>
[text* your-name placeholder "Your Name (required)"] </label>
<label>
[email* your-email placeholder "Your email (required)"] </label>
<label>
[text your-subject placeholder "Subject"] </label>
<label>
[textarea your-message placeholder "Your Message"] </label>
[file file-442 limit:10485760 filetypes:doc|pdf|csv class:cv]
[submit "AHOI!"]
Итак, есть ли способ заменить этот последний ввод, где файл находится с моим вводом, и скрыть исходный ввод? Это мой вклад
input[type = "file"] {
display: none;
}
.custom-file-upload {
border: 1px solid currentColor;
color: #083a50;
cursor: pointer;
display: inline-block;
font-weight: bold;
line-height: 1;
padding: 0.5em 2em 0.25em 1em;
user-select: none;
}
.upload {
height: 1.75em;
margin-right: 0.5em;
padding-bottom: 0.25em;
width: auto;
vertical-align: middle;
}
<label for = "file-upload" class = "custom-file-upload">
<img class = "upload"src = "http://www.plaforma.me/wp-content/uploads/2018/04/SEND-FILE-IKONICA.png" width = "300" height = "53" alt = ""> Select File
</label>
<input id = "file-upload" type = "file" />
Не знаю, почему здесь не загружается значок рядом с текстом, но есть значок, поэтому кто-нибудь понял, как я могу заменить оригинал в контактной форме 7?
Да, но как я могу заменить оригинал в контактной форме? Я пробовал с отображением: нет, но когда я отправляю его со своим вводом, файл не отправляется
вы можете определить метку и изображение в cf7 и можете назначить класс для ввода файла, чтобы захватить вас css вместо его по умолчанию
Звучит хорошо, сейчас попробую
Я пробовал присвоить файлу класс метки, но потом он все схватывает и удаляет логику открытия файла
Для стилизации файлового типа ввода очень хороша библиотека http://markusslima.github.io/jquery-filestyle.
$(":file").jfilestyle({input: false, text: "Select File"});
Также смотрите варианты здесь. http://markusslima.github.io/jquery-filestyle/options.html
Ваши варианты будут такими: $ (": file"). Jfilestyle ({input: false, text: "Select File"}); для параметров стиля следуйте этому: markusslima.github.io/jquery-filestyle/extends.html
Хорошо работает в codepen.io/navdeepsingh/pen/bmejjq