输入框<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;
}