Vue3+element ui取消el-select下拉选边框-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3+element ui取消el-select下拉选边框。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

修改前
elementui下拉框边框,前端,vue.js,elementui,javascript
修改后

css样式文章来源地址https://www.toymoban.com/news/detail-606740.html

<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>