小编典典

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

html

我试图根据我的个人喜好设置文件上传按钮的样式,但是如果没有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通常会带来其他问题,例如小提琴中的问题)?


阅读 283

收藏
2020-05-10

共1个答案

小编典典

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

有一种非常简单的方法来执行此操作,而不会限制您使用浏览器定义的输入尺寸。只需<label>在隐藏文件上传按钮周围使用标记即可。与通过webkit的内置样式1]允许的样式相比,这提供了更大的样式自由。

制作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:hiddendisplay:none文件输入中使用)中也能正常工作。我已经在模拟IE7及更高版本中进行了测试,并且效果很好。


  1. 不幸的是,您不能使用<button>s内部<label>标签,因此您必须自己定义按钮的样式。对我来说,这是这种方法的唯一缺点。
  2. 如果for定义了属性,则其值将用于触发输入,其输入与上idfor属性相同<label>
2020-05-10