html - CSS 和 html : how to style input file in css (aline the text with the choose file button)?

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 访问文件名，但不能访问路径)是)。