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