使用css3的content属性自定义上传文件样式

html如下

<div class="upload-btn btn-old">
   <input type="file" name="" accept="image">
</div>

如果采用默认样式，在谷歌，火狐,ie等浏览器下不但宽度不一致，ie下面还默认输入框在左边，点击按钮在右边，样式古怪，但是因为java那边已经按着这个html从服务器导入了数据，如是只能纯改动css来改变样式，思路如下，input框肯定要设置透明度为0，然后覆盖到最上层能够实现点击效果，那么就只能添加一个before伪类来用content属性实现文本，其他的样式可以加在before上也可以加载div上（ps :before是在元素里面的前面添加内容，不是在元素前面，他也属于元素的内容）

css如下

.upload-btn{
	width:70px;
	height:20px;
	line-height:20px;
	overflow:hidden;
	position:absolute;
	top:50px;
	left: 250px;
 	background: #ebebeb;
	border: 1px solid #ccc;

}
.upload-btn>input{
	opacity: 0;
    cursor:pointer;
	filter:alpha(opacity:0);
	z-index:999;
    position: absolute;
	top: 0;
	right: 0;
}
.upload-btn:before{
	width: 100%;
	content: "选择文件";
	text-align: center;
	font-size: 15px;
	padding-left: 5px;
	font-family: "微软雅黑";
    color:#333;
}