设置输入类型=“文件"的样式按钮 [英] Styling an input type="file" button

问题描述

如何设置输入 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

这篇关于设置输入类型=“文件"的样式按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！