Question

我正在尝试用我在小提琴中设计的现代工具替换旧的输入文件。但是，由于我使用的是WP contact form 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

设置联系表7中的输入文件样式

1 个答案: