• 企业400电话
  • 网络优化推广
  • AI电话机器人
  • 呼叫中心
  • 全 部 栏 目

    网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    input file自定义按钮美化(演示)
    POST TIME:2021-10-16 22:42

    以前写过这样的文章但是用了js脚本,优点是可以显示文件路径。

    如果可以不要看到路径,只显示自定义按钮,另有其方法,下面只是用用了css的技巧来实现。

    关键是给file文件域给了font-size,设置一个比较大的值,使其表单大写发生改变(各浏览器外观不同,但大写都改变了)如下图:

    input{font-size:100px;}

    再用position定位,和透明度达到自己想要的效果。具体代码如下:

    复制代码
    代码如下:

    .fileInputContainer{
    height:256px;
    background:url(//img.jbzj.com/file_images/article/201212/2012122514125641.png);
    position:relative;
    width: 256px;
    }
    .fileInput{
    height:256px;
    overflow: hidden;
    font-size: 300px;
    position:absolute;
    right:0;
    top:0;
    opacity: 0;
    filter:alpha(opacity=0);
    cursor:pointer;
    }


    复制代码
    代码如下:

    <div class="fileInputContainer">
    <input class="fileInput" type="file" name="" id="" />
    </div>

    DEMO:

  • 相关文章
  • 

    关于我们 | 付款方式 | 荣誉资质 | 业务提交 | 代理合作


    © 2016-2020 巨人网络通讯

    时间:9:00-21:00 (节假日不休)

    地址:江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

    X

    截屏,微信识别二维码

    微信号:veteran88

    (点击微信号复制,添加好友)

     打开微信