html+css实现自定义图片上传按钮

<label class="btn">
			<span id="selects">选择图片</span>
			<input type="file" class="file" />
		</label>

.btn{
				display: inline-block;
				width: 75px;
				height: 25px;
				line-height: 25px;
				border: 1px solid #23c6c8;
				background: #23c6c8;
				color: #fff;
				text-align: center;
				font-size: 14px;
				border-radius: 3px;
				overflow: hidden;
				position: relative;
				vertical-align: center;		
			}
			.btn:hover{
				border: 1px solid #23babc;
				background: #23BABC;
			}
			input{
				position: absolute;
				left: 0;
				top: 0;
				opacity: 0;
			}

$('.btn').on('change','.file',function(e){
	var name = e.target.files[0].name;
	$('#selects').html(name)
})