html的文件控件<input type="file">样式的改变

一直以来，<input type="file">上传文件标签默认样式都是让人不爽的，使用它多要给它整整容什么的，当然如果用ui插件还比较方便，不能就自己来操刀实践一下！

html:

1 <a href="javascript:void(0);">
2       <input type="file" id="fileElem">
3 </a>

css:

  <style>
    a{
        width:180px;
        height:100px;
        overflow:hidden;
        display:block;
        text-decoration:none;
        position:relative;
        background:#ccc;
    }
    #fileElem{
        position:absolute;
        top:0;
        right:0;        
        background:none;
        margin:0;
        padding:0;
        cursor:pointer;
        width:700px;
        height:200px;
        font-size:60px;/*这个设置很重要*/
        filter:alpha(opacity=0);/*把上传控件的透明度设为0*/
        -moz-opacity:0;
        opacity:0;
    }
  </style>

视图效果：

然后可以自由改变大小，用图片覆盖，或者做其他的修饰

效果在ie，ff，谷歌，欧朋都是一样的，safari没测试。

转载于:https://www.cnblogs.com/chendc/p/5366889.html