码迷,mamicode.com
首页 > Web开发 > 详细

文件上传按钮input[type="file"]按钮美化时在IE8中的bug【兼容至IE8】

时间:2017-08-20 18:32:19      阅读:1305      评论:0      收藏:0      [点我收藏+]

标签: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

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!