上传按钮样式的终极解决方案_input透明法

转载 2016年05月31日 09:03:30

方法/步骤

  1. 默认的上传按钮非常丑陋,而且样式不易修改,并且在不同浏览器中展现的形式还不一样。

    自定义上传按钮样式的终极解决方案_input透明法



  2. 解决方案:最好的解决办法就是将我们要用来修改的样式放在一个div中,并且放在input按钮的下面,而input显示透明。

  3. 这样实际点击的input看着好像点击的那张图片了。

    <div class="div1">

        <div class="div2">上传图片</div>

        <input type="file" class="inputstyle">

    </div>

    自定义上传按钮样式的终极解决方案_input透明法



  4. 给其增加样式:

    <style>

    .div1{

    float: left;

    height: 41px;

    background: #f5696c;

    width: 144px;

    position:relative;

    }

    .div2{

    text-align:center;

    padding-top:12px;

    font-size:15px;

    font-weight:800

    }

    .inputstyle{

        width: 144px;

        height: 41px;

        cursor: pointer;

        font-size: 30px;

        outline: medium none;

        position: absolute;

        filter:alpha(opacity=0);

        -moz-opacity:0;

        opacity:0; 

        left:0px;

        top: 0px;

    }

    </style>

    <div class="div1">

        <div class="div2">上传图片</div>

        <input type="file" class="inputstyle">

    </div>

    如此就可以是实现“点击$(".div2")上传文件”的效果了。

    自定义上传按钮样式的终极解决方案_input透明法

怎么简便地去掉html中难看的文件上传按钮并实现图片预览功能?

问题描述通常的文件上传按钮是这样的: 选择了文件过后是这样的: 很显然,这样的按钮并不好看。解决方法用一个label标签来装载样式,其for属性指向type=file的input,然后将i...
  • zhoucheng05_13
  • zhoucheng05_13
  • 2016年12月23日 14:47
  • 4287

上传图片时button按钮隐藏,用做好的样式

jsp: 主题首页 alt="" style="width: 100%; height: 100%; top: 0;" /> name="filepathsave" id="file...
  • abou15871390117
  • abou15871390117
  • 2017年09月07日 19:03
  • 343

文件上传按钮样式美化,显示图片路径

隐藏input file按钮,用同级button代替,并在button后面显示图片信息
  • sinat_35788325
  • sinat_35788325
  • 2016年12月08日 14:32
  • 422

CSS3 input[type=file] 样式美化,input上传按钮美化

html自带的上传按钮非常丑,在HTML4+CSS2时,想要美化文件上传还是很麻烦了。 HTML5+CSS3后,就非常方便了,实例如下: 思路: input file上传按钮的美...
  • lyb8010
  • lyb8010
  • 2016年05月25日 22:29
  • 5384

修改文件上传按钮样式

页面中修改文件上传默认按钮样式!
  • u010725245
  • u010725245
  • 2016年04月26日 22:51
  • 1611

美化input文件上传按钮

前言:用过文件上传的同学都知道,html自带的上传按钮样子很丑,如果我们写的界面比较炫的话,在加上个原始的按钮,界面就会大打折扣,所以美化上传按钮是很有必要的。一。实现方法 在按钮的外围包裹一个di...
  • Picking_up_stones
  • Picking_up_stones
  • 2016年12月23日 17:36
  • 1603

上传文件控制input type="file"样式修改记

前几天改几个页面样式,大部分都改完了,就剩上传文件控件没有美化,就想放过去算了,就这样吧,后来还是觉得实在看不下去,还是动了点小脑筋把它改造完了,开心开心 ... 现记录一下改造过程: 最先就是就这个...
  • junjun222222
  • junjun222222
  • 2017年05月25日 16:13
  • 195

input上传文件的样式修改

* { margin: 0; padding: 0; } .upload { display: inline-block; ...
  • qq_40639990
  • qq_40639990
  • 2017年10月22日 10:48
  • 122

css input[type=file] 样式美化,input上传按钮美化

我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?同理:input checkbox美化,input radio美化是一个道理的 思路: input ...
  • u010174173
  • u010174173
  • 2015年07月21日 11:07
  • 1628

自定义 input type="file" 文件上传样式

本文主要介绍如何修改原生的标签的显示效果,自定义实现文件上传的样式。...
  • bruce_6
  • bruce_6
  • 2015年09月01日 16:03
  • 8857
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:上传按钮样式的终极解决方案_input透明法
举报原因:
原因补充:

(最多只允许输入30个字)