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

Anastasia289

已于 2024-08-27 16:56:05 修改

阅读量654

点赞数 10

文章标签： vue.js javascript 前端 vue

于 2024-08-27 11:53:31 首次发布

本文链接：https://blog.csdn.net/qq_56637156/article/details/141599153

版权

样式如图：

参考博客链接：

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

<el-select v-model="isExceed" style="margin-left: 10px; width: 100px;" class="select_box">
    <el-option key="0" label="yes" value="0" />
    <el-option key="1" label="no" value="1" />
</el-select>

<style lang="scss">

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

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

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

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

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


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

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

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

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

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

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

</style>

如果要避免样式污染，可以写成这样，然后直接引用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;
  }
}