如何为电子邮件联系表 7 设置 "Search Computer" 文件上传按钮的样式？

Question

我在 wordpress 上有一个标准的“联系表格 7”发送文件作为附件表格：

<label>UPLOAD FILE
[file uploadedfile]
</label>

我已经搜索过 Whosebug 等等等等。 2 小时后我放弃了 :(

如何轻松更改背景颜色和字体大小？

如果我直接接触文件表单控件，它会像一个巨人一样爆炸。这对计算机没有用，并且从不响应移动设备。

作为第二个问题。

是否可以将“未选择文件”的格式设置为与“搜索计算机 (Durchsuchen)”不同的格式？

Answer 1

虽然由于浏览器的兼容性，很难为文件输入本身设置样式，但您可以将样式应用于其标签以实现相同的结果。

看看这个例子输入：

<label for="fileInput">
    Upload file
</label>
<input id="fileInput" type="file">

因为标签直接链接到输入，一旦您点击标签或输入，它就会打开文件浏览器。既然如此，你可以隐藏输入本身，只显示标签。

<style>
input[type="file"] {
    display: none;
}
</style>

现在您只剩下标签了，您可以对元素应用样式，使其看起来更像按钮而不是标签。看看这个 CSS 的基本示例，您可以使用它来设置标签的样式。

<style>
label[for="fileInput"] {
    border: 1px solid black;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}
</style>

这是隐藏输入并向标签添加样式后的最终结果。当然，这只是一个基本示例，但是通过 CSS 可以实现的几乎没有限制，因此您可以按照自己喜欢的方式设置标签样式。

将所有内容放在一起，此实现的最终代码如下所示：

input[type="file"] {
  display: none;
}

label[for="fileInput"] {
  border: 1px solid black;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}

<!doctype html>
<html>

<head>
  <title>File upload styling</title>
</head>

<body>
  <form method="post">
    <label for="fileInput">
    Upload file
</label>
    <input id="fileInput" type="file">
  </form>
</body>

</html>

由于您使用的是 WordPress，因此您最终只需将 CSS 放入您的主题样式中，但实现应该与静态 [=41= 的实现几乎相同] 网站。

如何为电子邮件联系表 7 设置 "Search Computer" 文件上传按钮的样式？

How to style the "Search Computer" File Upload button for eMail Contact Form 7?

html

css

wordpress

forms

contacts