我试图根据我的个人喜好设置文件上传按钮的样式,但是如果没有JS,我找不到任何真正可靠的方法来实现此目的。我确实找到了与此主题有关的另外两个问题,但是那里的答案要么涉及JavaScript,要么建议使用Quirksmode的方法。
我使用Quirksmode方法的主要问题是文件按钮仍将具有浏览器定义的尺寸,因此它不会自动调整为位于其下方的按钮。我已经基于它编写了一些代码,但是它只会占用文件按钮通常会占用的空间,因此它根本不会像我想要的那样填满父div。
HTML:
<div class="myLabel"> <input type="file"/> <span>My Label</span> </div>
CSS:
.myLabel { position: relative; } .myLabel input { position: absolute; z-index: 2; opacity: 0; width: 100%; height: 100%; }
演示了这种方法是多么有缺陷。在Chrome中,单击!!第二个演示按钮下方的按钮将始终打开文件对话框,但是在所有其他浏览器中,文件按钮也不会占用按钮的正确区域。
!!
是否有更可靠的方式来设置文件上传按钮的样式,而不使用任何JavaScript,并且最好使用尽可能少的“ hacky”编码(因为hack通常会带来其他问题,例如小提琴中的问题)?
我发布这个是因为(令我惊讶)没有其他地方可以推荐这个。
有一种非常简单的方法来执行此操作,而不会限制您使用浏览器定义的输入尺寸。只需<label>在隐藏文件上传按钮周围使用标记即可。与通过webkit的内置样式1]允许的样式相比,这提供了更大的样式自由。
<label>
制作label标签的确切目的是将其上的所有单击事件定向到子输入[2],因此使用该标签,您将不再需要任何JavaScript即可将click事件定向到输入按钮。您将使用类似以下的内容:
label.myLabel input[type="file"] { position:absolute; top: -1000px; } /***** Example custom styling *****/ .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 class="myLabel"> <input type="file" required/> <span>My Label</span> </label>
我使用了固定的位置来隐藏输入,以使其即使在较旧版本的Internet Explorer(模拟IE8-拒绝在a visibility:hidden或display:none文件输入中使用)中也能正常工作。我已经在模拟IE7及更高版本中进行了测试,并且效果很好。
visibility:hidden
display:none
<button>
for
id