Стилизация входного файла в контактной форме 7

Я пытаюсь заменить этот старый входной файл чем-то современным, созданным мной в скрипке. Однако, поскольку я использую контактную форму 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?

Хорошо работает в codepen.io/navdeepsingh/pen/bmejjq

Navdeep Singh 05.10.2018 13:05

Да, но как я могу заменить оригинал в контактной форме? Я пробовал с отображением: нет, но когда я отправляю его со своим вводом, файл не отправляется

Blazo 05.10.2018 13:07

вы можете определить метку и изображение в cf7 и можете назначить класс для ввода файла, чтобы захватить вас css вместо его по умолчанию

Darsh khakhkhar 05.10.2018 13:23

Звучит хорошо, сейчас попробую

Blazo 05.10.2018 13:37

Я пробовал присвоить файлу класс метки, но потом он все схватывает и удаляет логику открытия файла

Blazo 05.10.2018 13:40
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
5
3 020
1

Ответы 1

Для стилизации файлового типа ввода очень хороша библиотека 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

Mahfuzul Hasan 05.10.2018 13:32

Другие вопросы по теме