当input中的type值为file时，各浏览器的表现形式不同

Posted 2020-10-08

如果想使各浏览器下的表现形式相同，需要对该input元素隐藏，然后再改元素下方添加标签。其html写法如下

<div class="input-file">
<input  type="file" name="postImg" value="上传图片" id="upload" class="file-button">
<label class="file-button-img">上传封面</label>
</div>

 

css布局如下

 

.input-file{
	display: inline-block;
	height:50px;
	width: 120px;
	/*background-color: #56F06F;*/
	text-align: center;
	cursor: pointer;
	position:relative;
}

.file-button{
	opacity: 0;
	position: absolute;
	left:0;
	top:0;
	width:120px;
	height: 50px;

}

.file-button-img{
	line-height: 50px;
	text-align: center;
	display: inline-block;
	margin-top: 5px;
	color:#fff;
	font-size: 18px;
	width:100%;
	height:100%;
	display: block;
	cursor:pointer;
	background-color: #3EF5B1;
}