
Vue3+element ui取消el-select下拉选边框
Vue3+element ui取消el-select下拉选边框
·
Vue3+element ui取消el-select下拉选边框
需求是: 取消下拉选的边框,并且修改下箭头的图标,从其他博主那拼凑修改出来的,适用于我项目的方法,在此做个记录
修改前
修改后
css样式
<style scoped lang="scss">
// 取消el-select的边框
:deep(.el-input){
width:100px;
--el-input-focus-border:#fff;
--el-input-transparent-border: 0 0 0 0px;
--el-input-border-color:#fff;
--el-input-hover-border:0px !important;
--el-input-hover-border-color:#fff;
--el-input-focus-border-color:#fff;
--el-input-clear-hover-color:#fff;
box-shadow: 0 0 0 0px !important;
--el-input-border:0px;
}
:deep(.el-select .el-input__wrapper.is-focus){
box-shadow: 0 0 0 0px !important;
}
:deep(.el-select .el-input.is-focus .el-input__wrapper){
box-shadow: 0 0 0 0px !important;
}
:deep(.el-select){
--el-select-border-color-hover:#fff;
}
// 自定义el-select的下拉箭头
:deep(.el-select__caret) {
/*很关键:将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*为下拉小箭头留出一点位置,避免被文字覆盖*/
padding-right: 14px;
/*自定义图片*/
background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
/*自定义图片的大小*/
background-size: 14px 12px;
}
/*将小箭头的样式去去掉*/
:deep(.el-icon-arrow-up:before){
content: '';
}
</style>
补充:另外一个项目无法去除原有下拉箭头, content: ‘’;没有生效,display: none;也不管用,原因未知,有知道的朋友欢迎告知。
最后我采用隐藏的方式显式去除下拉箭头
/*在上述css的基础上增加如下代码*/
:deep(.el-select .el-input__suffix .el-select__caret svg) {
content: '';
color: rgba(0, 0, 0,.01); /* 修改箭头的颜色,透明度极低,达到隐藏的效果 */
font-size: 8px; /* 修改箭头的大小 */
}
更多推荐
所有评论(0)