zoukankan      html  css  js  c++  java
  • 利用label for标签实现漂亮的上传按钮

    说在开头

      前面有两个博客设计到了上传功能,由于原生的上传控件比较丑,不符合特定的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;
              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下的表现基本一致。


    最后

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

  • 相关阅读:
    @Autowired 注解是如何实现的?
    工作 3 年的同事不懂 isEmpty 和 isBlank 的区别,我真是醉了。。
    4 个单词,谷歌返回 16 个 SQL 注入漏洞...
    MySQL 更新不成功,事务问题搞清楚了吗?
    Python Web应用如何部署?
    mapbox加载postgis矢量切片
    tile2lon:地图瓦片编号与经纬度的换算关系
    shp2pgsql:将shapefile导入postgis数据库
    postgreSQL表添加ID自增列
    postgreSQL连接配置
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13317500.html
Copyright © 2011-2022 走看看