利用label for标签实现漂亮的上传按钮

利用label for标签实现漂亮的上传按钮说在开头 前面有两个博客设计到了上传功能,由于原生的上传控件比较丑,不符合特定的UI为此,想了很多方法来解决这个问题,目前比较流行的方法是: 让file类型的元素透明度0,覆盖在我们好看的按钮上。然后我们去点击好看的按钮,实际上点击是是file元素。但是这样做有几个问题1.尺寸控制不灵活。CSSwidth属性有些浏览器不管用,需要使用size,然后高度控制也不精准,我们很难正好覆盖在好看的自…

说在开头

  前面有两个博客设计到了上传功能,由于原生的上传控件比较丑,不符合特定的UI为此,想了很多方法来解决这个问题,目前比较流行的方法是:

  让file类型的元素透明度0,覆盖在我们好看的按钮上。然后我们去点击好看的按钮,实际上点击是是file元素。

但是这样做有几个问题

1.尺寸控制不灵活。CSS width属性有些浏览器不管用,需要使用size,然后高度控制也不精准,我们很难正好覆盖在好看的自定义按钮上。

2.样式不好控制,按钮的hover态以及active态不好处理。

3.HTML结构限制以及定位成本。

比较严重的就是IE8下面如下图所示的按钮,实际上只能点击右下角区域才能弹出文件选择框;而且,input获得焦点时,始终有一个光标在左上角闪动。

wKiom1ZdPvbDwqI6AABK_DTKgU4790.png

  


正文

   现在提供一个更加简单有效的解决方案,利用label标签的for属性指向input,然后隐藏input就可以了;

相对上面的方法有事就比较明显了:

1.不用考虑input的大小,透明度,定位等等,直接隐藏就好了。

2.label标签的样式完全自己定义,不用考虑input

  好了直接上个例子

css代码:

        .fileLabel{
          display: inline-block;
          width:180px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          border: 1px solid #8cc051;
          border-radius: 5px;
          background: #8cc051;
          cursor: pointer;
        }
        .fileInput{display: none;}

html代码:

<label class="fileLabel" for="upfiles">选择文件label</label>
<input id="upfiles" type="file" class="fileInput">

简单的效果图如下:

wKiom1ZdQGHyNsHlAAAgoqoleTU978.png

在IE,chrome下的表现基本一致。


最后

这个方案可以替换,上面比较复杂的方案,希望可以帮助到各位。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/36875.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注