VUE3-修改element-plus-el-select的下拉框样式

样式如图：

参考博客链接：

修改el-select和el-input样式；修改element-plus的下拉框el-select样式；修改placeholder样式_elementplus el-select 样式修改-CSDN博客

如果要避免样式污染，可以写成这样，然后直接引用style文件就好

.my-select {
  :deep(.el-select) {
    --el-select-border-color-hover: rgb(0, 162, 255) !important; // 修改下拉框hover的默认样式
  }

  :deep(.el-input) {
    --el-border-color: rgb(0, 162, 255); // 修改下拉框的边框
  }

  :deep.el-select .el-input__wrapper {
    background-color: rgba(0, 120, 233, 0.63) !important; // 外层下拉框背景
  }

  :deep(.el-input__wrapper) {
    --el-input-text-color: white !important; // 修改外层下拉框的颜色
  }

  :deep(.el-select .el-input .el-select__caret) {
    color: rgb(0, 162, 255); // 修改下拉框的倒三角颜色
  }


  :deep(.el-select__popper.el-popper) {
    border: rgba(0, 27, 63) !important; // 修改内部下拉框的边框颜色
  }

  :deep(.el-select-dropdown__wrap) {
    background-color: rgba(0, 27, 63); // 下拉框背景色
  }

  :deep(.el-select-dropdown__item) {
    background: rgba(0, 27, 63) !important; // 下拉框选项的颜色
  }

  :deep(.el-select-dropdown__item) {
    color: white;
    // font-weight: 500;
  }

  :deep(.el-select-dropdown__item.hover) {
    background-color: rgba(0, 120, 233, 0.63) !important; // hover
    color: white;
    font-weight: 700;
  }

  :deep(.el-select-dropdown__item.selected) {
    color: #409eff !important;
    font-weight: 700;
  }
}