＜input type=“file“/＞如何将样式变得更好看

输入框<input type="file"/>的默认样式是这样的

虽然功能没有任何问题，但是这个默认的样式总是让人觉得与页面格格不入

那么，我们有没有什么方法能优化一下它的样式呢？

先来看一下成品

功能也是可以正常使用的

其实很简单，这里用到了<label>标签

<label>定义

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

注意：label中的for属性应与input元素的id一致

<form id="form">
	<label for="submit">
		<div class="lBut"><span>选择文件</span></div>
	</label>
	<input id="submit" type="file" style="display: none;" />
</form>

按钮的样式就交给大家自己发挥啦，这里仅做一下参考

.lBut{
	width: 87px;
	height: 32px;
	font-size: 14px;
	line-height: 1.15;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 4px;
	padding: 8px 10px;
	margin-left: 28px;
	transition: all 0.5s;
	white-space: nowrap;
	background-color: #409eff;
	color: white;
	border: 1px solid #409eff;
}