修改el-select 右侧图标样式和边框颜色

原创已于 2022-12-29 18:34:11 修改 · 3.6k 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端开发

当前文章被收录于：

前端开发

20 篇文章 2 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

于 2022-09-23 10:15:23 首次发布

本文指导如何在Element UI的下拉框中定制边框颜色和右侧箭头图标样式，包括CSS代码示例，帮助开发者实现个性化设计。

需求：elementui 下拉框修改边框颜色和右侧图标样式

1、修改后效果
在这里插入图片描述

/*右侧图标样式  \e790下箭头图标*/
.el-select .el-input .el-select__caret.el-input__icon::before {
  content: "| \e790";  
  color: #FD724E;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/*如果不设置图标下拉时是反的*/
.el-select .el-input .el-select__caret {
  transform: rotateZ(0deg);
}