element-ui下拉框自定义样式_el-select 修改下拉框样式

自定义 el-select 下拉选项选项框样式

修改下拉选项框背景要将popper-append-to-body设为false,将其附在父元素上,如果其他元素层级过高,追加z-index属性
/* 修改下拉框单个选项的字体颜色 */

.el-select-dropdown__item {
  color: blue;
}
1
2
3

/* 修改下拉框选项的背景色 需要在html的el-select标签中写上:popper-append-to-body=“false” 不将其附到body中*/

::v-deep .el-select-dropdown {
  background-color: #000;
  border: unset;
}
1
2
3
4

// 选中的时候的背景色

.el-select-dropdown .el-select-dropdown__item.hover {
  background: red;
}
1
2
3

//悬浮时候的背景色

.el-select-dropdown .el-select-dropdown__item:hover,
.el-select-dropdown .el-select-dropdown__item.selected {
  background-color: yellow;
}
1
2
3
4

/* 下拉框inputt中的下三角样式 */

// ::v-deep .el-select .el-input__suffix .el-select__caret {
//   color: red; /* 设置小箭头的颜色为红色 */
// }
1
2
3

//下拉选项框的实心三角的颜色

::v-deep .popper__arrow::after {
  border-bottom-color: red !important;
}
1
2
3