标签:bsp nbsp display class 分享 效果 upload flow log
首先看一下完成后的效果,鼠标移入可改变为手指的效果。
在此就不加图标了
<label class="file-upload"> <span>上传附件</span> <input type="file" name=""> </label>
在IE8中需要将input透明后还不能完全达到效果,还需要将字体设大一些,撑开input,这是IE自带的兼容问题。
.file-upload{ display: inline-block; width: 120px; height: 36px; line-height: 36px; text-align: center; color: #fff; position: relative; overflow: hidden; background:#3AA1F5; margin-left: 15px; } .file-upload input{ position: absolute; left: 0; top: 0; z-index: 10; opacity: 0; filter:Alpha(opacity=0); color: transparent; width: 100%; height: 100%; cursor: pointer; font-size: 100px; background:transparent; } .file-upload span{ margin: 0 5px; font-size: 12px; }
文件上传按钮input[type="file"]按钮美化时在IE8中的bug【兼容至IE8】
标签:bsp nbsp display class 分享 效果 upload flow log
原文地址:http://www.cnblogs.com/pomelott/p/7400554.html