Vue3+element ui取消el-select下拉选边框_vue3中使用elementplus选择器的边框如何去掉

需求是： 取消下拉选的边框，并且修改下箭头的图标，从其他博主那拼凑修改出来的，适用于我项目的方法，在此做个记录

修改前

修改后

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42