css - 联系表格 7 中的样式输入文件

Question

我正在尝试用我在 fiddle 中设计的现代文件替换旧的输入文件。但是，由于我使用的是 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 中的原始图标吗？

Answer 1

对于样式，文件输入类型 http://markusslima.github.io/jquery-filestyle图书馆非常好。

$(":file").jfilestyle({input: false, text: "Select File"});

另请参阅此处的选项。 http://markusslima.github.io/jquery-filestyle/options.html