修改文件上传 input type="file"按钮的样式

改变文件上传 input type="file"按钮的样式

在使用传统原生input file时，通常会想要使得按钮的样式换成自己定义的样式

主要思想

1、使得原按钮在当前位置透明
2、将自己需要的样式覆盖到原按钮上面（通过设置margin的负值可以实现，当然也可能有其他方法）

<!-- HTML代码 -->
<div class="text-center profilesubmit btn btn-primary fileinput-button">
	<input type="file" name="" id="" class="fileinput">
	<span class="filefont">修改头像</span>
</div>
									

/* css代码 */
.fileinput {
	width: 102px;
	height: 34px;
	opacity: 0;
	padding: 0;
	margin: 0;
}

.filefont {
	    margin-top: -36px;
    display: block;
    line-height: 34px;
}

网上其它样式设置方法

我试了，并没有实现效果（按钮是隐藏了，但是点击无效）；
其主要思想是“使得input完全不见了踪影，点击“上传”依然有效”

.fileinput-button input{
	position: absolute;
	left: 0px;
	top: 0px;
	opacity: 0;		//移动按钮位置，透明度为零，是按钮隐藏
	-ms-filter: 'alpha(opacity=0)';
}