1.input输入框点击有边框的解决办法
点击输入的时候不需要input输入框有边框显示,例如按钮就不需要,如果设置了border-radius,在点击的时候还有边框就会超级丑。如何解决呢?
给input 加一个outline:none;
就ok了
2.input type 为file时移上去的样式
H5的文件选中是非常常用的功能,但是通常来讲,会样式,类似如下
当移上去设置为小手 cursor: pointer
;,发现会有问题 ,小手的覆盖会不完全,有点地方仍保持原样式,这是因为原样式虽然隐藏,但是仍占位置,这时加一个 font-size: 0;
就可以解决了。
3.修改第三方UI的样式
修改iview,element的样式,可以不加scoped直接修改,但是影响全局不可取,另一种就是在外面套个父盒子改,可以使用 >>> 深入穿透修改样式,但是sass不支持>>>,需要使用/deep/ 来穿透
eg:
.tracts-info-wrappe >>> .el-dialog__footer {
color: red;
}
.tracts-info-wrapper /deep/ .el-dialog__footer {
margin-top: -20px;
}
4.改变滚动条的样式
box滚动的盒子
.box::-webkit-scrollbar{
width: 8px;
height: 5px;
border-radius: 5px;
background-color: #EAEAEA;
}
.box::-webkit-scrollbar-thumb{
min: 5px;
max: 10px;
border-radius: 5px;
-webkit-box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.2);
box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.2);
background: rgba(50, 50, 50, 0.2);
}
.box::-webkit-scrollbar-track{
background-color: #EAEAEA;
border-radius: 5px;
}