上传文件的输入框演示往往非常难看,但又不想使用bootstrop或者elementui框架的样式
所以可以通过自定义样式来修改input的样式
可以通过父子定位来实现修改
代码如下
html代码
<div class="group">
<label for="img" class="labelImg">
<input type="button" id="btn" value="请上传识别图像" />
<input type="file" name="img" id="img" /><br /><br />
</label>
</div>
css代码
.labelImg {
position: relative;
#img {
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
#btn {
padding: 5px 10px;
background-color: #00b0f0;
color: #fff;
border: none;
border-radius: 5px;
}
}
修改后的样式
![](https://img-blog.csdnimg.cn/img_convert/477d1f030fb343bcb8e3f5dad2c6604e.png)