element ui修改select选择框背景色和边框色

在Element UI中，可以通过CSS覆盖默认的样式来修改Select组件的背景色和边框色。以下是一个示例，展示如何通过自定义类来更改背景色和边框色：

<template>
  <el-select class="custom-select-style" v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      value: '',
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }]
    };
  }
};
</script>
 
<style>
/* 添加自定义类来覆盖默认样式 */
.custom-select-style .el-input {
  background-color: #f0f0f0; /* 背景色 */
  border-color: #d3dce6; /* 边框色 */
}
 
/* 当Select处于焦点状态时，边框色可以有所变化 */
.custom-select-style .el-input:focus {
  border-color: #409EFF;
}
</style>

在上述代码中，.custom-select-style 类被添加到 el-select 组件上，以便通过CSS来改变其背景色和边框色。你可以根据需要修改 .custom-select-style 类中的 background-color 和 border-color 属性值。