• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    input file自定义按钮美化(演示)

    以前写过这样的文章但是用了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:

    上一篇:谈html mailto(电子邮件)实际应用
    下一篇:网页制作中表格属性CellPad、CellSpace和Border描述及使用介绍
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    input file自定义按钮美化(演示) input,file,自定义,按钮,美化,