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; /* 修改箭头的大小 */
	}