el-select选择器修改背景颜色

javascript 复制代码
<!--
 * @FilePath: topSearch.vue
 * @Author: 是十九呐
 * @Date: 2024-07-18 09:46:03
 * @LastEditTime: 2024-07-18 10:42:03
-->
<template>
  <div class="topSearch-container">
    <div class="search-item">
      <div class="item-name">客户编码</div>
      <div class="item-input">
        <el-select v-model="value" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>

    <div class="search-item">
      <div class="item-name">单位</div>
      <div class="item-input">
        <el-input v-model="input" placeholder="请输入内容"></el-input>
      </div>
    </div>

    <div class="search-item">
      <div class="item-name">服务站</div>
      <div class="item-input">
        <el-input v-model="input" placeholder="请输入内容"></el-input>
      </div>
    </div>

    <div class="search-item">
      <div class="item-name">客户经理</div>
      <div class="item-input">
        <el-input v-model="input" placeholder="请输入内容"></el-input>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      input: ''
    }
  }
}
</script>

<style lang="scss" scope>
.topSearch-container {
  display: flex;
  align-items: center;
  justify-content: space-around;

  .search-item {
    display: flex;
    align-items: center;

    .item-name {
      margin-right: 21px;
      color: #01E6F4;
      font-size: 14px;
    }
  }
}
</style>

<!-- 修改背景颜色 -->
<style>
.el-input__inner,
.el-input__inner:hover,
.el-input__inner:after {
  background-color: #03192B !important;
  border: 1px solid #01E6F4 !important;
  color: #fff;
}
.el-select-dropdown__item {
  background-color: #03192B;
  color: #fff;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  color: #0A81FF;
}
.el-select-dropdown__list {
  padding: 0;
  border: 1px solid #01E6F4;
}
.el-popper[x-placement^=bottom] .popper__arrow,
.el-popper[x-placement^=bottom] .popper__arrow::after {
  border-bottom-color: #01E6F4;
}
.el-select-dropdown {
  border: none;
}
</style>