CSS和html：如何在css中设置输入文件的样式（使用选择文件按钮的文本）？

Question

请参阅上图。我有几次这个问题。文本永远不会与按钮结合。 我们怎样才能改变它以便它们能够实现呢？

代码很简单：

<td><label>Image/Avatar Upload</label></td>
<td><input type="file" name="avatar"></td>

和css：

input {width: 350px; font-size: 20px; padding: 2px;}

谢谢！

Answer 1

简短的回答是：不要试图设置文件输入样式

答案很长：完全控制样式文件输入多年来一直未能实现。它们的组件属于所谓的 Shadow DOM 。我们可以看到它们，但我们无法真正触及它们。较新的输入元素（日期，时间，颜色等）具有相同的“问题”。

应该注意的是，并非每个浏览器样式文件都以相同的方式输入。如果您确实 想要控制此元素，则必须替换它（谷歌：“用图像替换文件输入”）。如果你这样做，当用户没有与文件输入元素交互时，用户将无法确切地看到正在上传的文件（由于安全原因，文件名可以通过JavaScript访问，但路径不会定）。

Answer 2

您应该提供更多详细信息，因为您提供的代码工作正常。

<td><label>Image/Avatar Upload</label></td>
<td><input type="file" name="avatar"></td>

请参阅此FIDDLE