html文件上传美化

html上传按钮美化

1. 效果图

2. 描述:通过定位覆盖原来的按钮
3. 代码

		<script src="layui/layui.js"></script>
		<link rel="stylesheet" href="layui/css/layui.css" />

		<div class="layui-form-item">
			<label class="layui-form-label">上传头像:</label>
			<div class="layui-input-block" style="position: relative;">
				<button type="button" class="layui-btn" id="test1">
							<i class="layui-icon">&#xe67c;</i>上传图片
					</button>
				<input type="file" name="photo" style="position: absolute; top: 7px; left: 0px; opacity: 0; cursor: pointer;" accept="image/png, image/jpeg">
			</div>
		</div>