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没测试。

posted @ 2016-04-08 10:15  chendechang  阅读(271)  评论(0编辑  收藏  举报