我有一个标准的“联系表 7”在 wordpress 上以附件形式发送文件：
<label>UPLOAD FILE
[file uploadedfile]
</label>
我已经搜索过 stackoverflow 等。 2小时后我放弃了:(
如何轻松更改背景颜色和字体大小？
如果我直接接触到文件表单控件，它会像巨人一样爆炸。这对计算机没有用，从不响应移动设备。
作为第二个问题。
是否可以将“未选择文件”的格式与“搜索计算机（Durchsuchen）”的格式不同？
【问题讨论】：
标签： html css wordpress forms contacts
虽然由于浏览器的兼容性，很难为文件输入本身设置样式，但您可以改为将样式应用于其标签以获得相同的结果。
看看这个示例输入：
<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 放入您的主题样式中，但其实现应该与静态 HTML 网站的实现几乎相同。
【讨论】：