Vue3 +Element-Plus Select 下拉菜单样式修改

news2024/11/18 1:31:30

需求

在这里插入图片描述

   <el-select
        v-model="sizeLang"
        placeholder="Select"
        style="width:116px"
        popper-class="selectBk"
      >
        <el-option
          v-for="item in langueOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

  setup () {
    const sizeLang = ref('')
    const langueOptions = [
      {
        value: 'en',
        label: 'English'
      },
      {
        value: 'zh',
        label: '中文简体'
      }
    ]

    return { sizeLang, langueOptions}
  }

CSS代码

<style lang="scss">
 
  // 修改下拉框背景颜色
  .el-popper.is-light {
    background: #3d455e !important;
    border: 1px solid #33394d !important;
 }

// 小三角颜色修改
.el-popper.is-light .el-popper__arrow::before {
    border: 1px solid #33394d !important;
    background: #3d455e !important;
}
//下拉选项字体颜色修改
.el-select-dropdown__item {
    color: #6687b8 !important;
}

//下拉选项---鼠标选中 字体，背景，颜色修改，圆角，间距修改
.el-select-dropdown__item:hover {
    background: #4d5b87 !important;
    border-radius: 8px !important;
    color: #fff !important;
    margin: 0 0.7vh !important;
}
</style>