CSS之⽂件实现上传按钮
⽂件上传按钮
<input type="file"id="btn_file">
默认样式：
默认样式着实不好看，⽽且我想让后⾯的‘未选择⽂件上传’去掉，将color设置为transparents就可以实现，但是我⼜想将按钮的字体颜⾊改为蓝⾊，显然就冲突了，实现不了。
改进⽅法：
<input type="file"id="btn_file" >
<button @click="handleSelectFile"class="upload_file">上传⽂件</button>
.upload_file{
color:#333333;
background-color: #fff;
padding:10px 30px;
margin-right:10px;
outline:none;
border:1px solid #ccc;
}
methods:{
handleSelectFile:function(){
},
}
效果如图
其中还解决了⼏个效果问题
（1）右边蓝⾊按钮本来⽤input元素，发现点击会出现抖动的情况，遂改成button元素，（2）butto元素点击会出现蓝⾊边框，设置outline:none去掉，中间的⽂本框道理类似
（3）蓝⾊button元素有阴影边框，设置border:none去掉
（4）⽽左边的⽩⾊button元素则重新设置边框border:1px solid #ccc覆盖掉默认边框。css去掉滚动条
（5）布局问题：
整个div⾥⾯包含左边的按钮，中间的输⼊框和右边的按钮，将最外层div设置为flex盒⼦
#upload{
display:flex;
flex-direction: row;
justify-content: center;
padding-top:20px;
padding-bottom:20px;
}
⽽中间的输⼊框设置为⾃适应
.input_url{
padding:10px;
flex-grow:1;
outline:none;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。