如何自定义el-select的样式？

Question

我希望字体颜色（也包括右侧的小箭头）为白色，背景颜色为蓝色，该如何设置el-select的样式呢？

<script setup lang="ts">
import { ElementPlus } from '@element-plus/icons-vue'
import { version as epVersion } from 'element-plus'
import { ref, version as vueVersion } from 'vue'

const msg = ref('Hello World!')
const value = ref()
const options = [1,2,3].map(e => {
  return {
    label: e,
    value: e,
  }
})
</script>

<template>
       <el-select
          v-model="value"
          :popper-append-to-body="false"
          placeholder="请选择"      >
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>

</template>

element-plus playground

Answer 1

样式部分

<style scoped>
.custom-select {
  --el-input-bg-color: blue;
  --el-input-text-color: white;
}

.custom-select .el-input__inner {
  background-color: var(--el-input-bg-color);
  color: var(--el-input-text-color);
}

.custom-select .el-input__icon {
  color: var(--el-input-text-color);
}

.custom-select .el-select-dropdown__item {
  background-color: var(--el-input-bg-color);
  color: var(--el-input-text-color);
}

.custom-select .el-select-dropdown__item:hover {
  background-color: darkblue;
}
</style>

脚本部分

<script setup lang="ts">
import { ref } from 'vue';

const value = ref();
const options = [1, 2, 3].map(e => ({
  label: e,
  value: e,
}));
</script>

模板部分

<template>
  <el-select
    v-model="value"
    class="custom-select"
    placeholder="请选择"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>