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

前端小小白~

已于 2022-12-29 18:34:11 修改

阅读量3.3k

点赞数 3

分类专栏：前端开发文章标签： vue.js 前端 javascript

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

本文链接：https://blog.youkuaiyun.com/DevelopmentW/article/details/127005536

版权

前端开发专栏收录该内容

20 篇文章

订阅专栏

需求：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);
}