设置输入类型=“文件"的样式按钮
如何设置输入 type=file" 按钮的样式?
How do you style an input type="file" button?
<input type="file" />推荐答案
样式文件输入是出了名的困难，因为大多数浏览器不会改变 CSS 或 javascript 的外观.
Styling file inputs are notoriously difficult, as most browsers will not change the appearance from either CSS or javascript.
即使输入的大小也不会响应:
Even the size of the input will not respond to the likes of:
<input type="file" style="width:200px">
相反，您需要使用 size 属性:
Instead, you will need to use the size attribute:
<input type="file" size="60" />
对于任何比这更复杂的样式(例如更改浏览按钮的外观)，您需要查看在本机文件输入之上覆盖样式按钮和输入框的技巧.rm 在 www.quirksmode.org/dom/inputfile.html 上已经提到的文章是我见过的最好的.
For any styling more sophisticated than that (e.g. changing the look of the browse button) you will need to look at the tricksy approach of overlaying a styled button and input box on top of the native file input. The article already mentioned by rm at www.quirksmode.org/dom/inputfile.html is the best one I've seen.
更新
虽然很难直接设置 <input> 标签的样式，但在 <label> 标签的帮助下，这很容易实现.请参阅@JoshCrozier 的以下回答:https://stackoverflow.com/a/25825731/10128619
Although it's difficult to style an <input> tag directly, this is easily possible with the help of a <label> tag. See answer below from @JoshCrozier: https://stackoverflow.com/a/25825731/10128619
相关文章