文件上传按钮的跨浏览器自定义样式

文件上传按钮的跨浏览器自定义样式

我发布这个是因为（令我惊讶）没有其他地方可以推荐这个。

有一种非常简单的方法来执行此 *** 作，而不会限制您使用浏览器定义的输入尺寸。只需

<label>

在隐藏文件上传按钮周围使用标记即可。与通过webkit的内置样式1]允许的样式相比，这提供了更大的样式自由。

制作label标签的确切目的是将其上的所有单击事件定向到子输入[2]，因此使用该标签，您将不再需要任何Javascript即可将click事件定向到输入按钮。您将使用类似以下的内容：

label.myLabel input[type="file"] {    position:absolute;    top: -1000px;}.myLabel {    border: 2px solid #AAA;    border-radius: 4px;    padding: 2px 5px;    margin: 2px;    background: #DDD;    display: inline-block;}.myLabel:hover {    background: #CCC;}.myLabel:active {    background: #CCF;}.myLabel :invalid + span {    color: #A44;}.myLabel :valid + span {    color: #4A4;}<label >    <input type="file" required/>    <span>My Label</span></label>

我使用了固定的位置来隐藏输入，以使其即使在较旧版本的Internet Explorer（模拟IE8-拒绝在a

visibility:hidden

或

display:none

文件输入中使用）中也能正常工作。我已经在模拟IE7及更高版本中进行了测试，并且效果很好。

---

1. 不幸的是，您不能使用

   <button>

   s内部

   <label>

   标签，因此您必须自己定义按钮的样式。对我来说，这是这种方法的唯一缺点。
2. 如果

   for

   定义了属性，则其值将用于触发输入，其输入与上

   id

   的

   for

   属性相同

   <label>

   。