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>
相关推荐
sdgsdgdsgc1 小时前
Next.js企业级应用开发:SSR、ISR与性能监控方案
开发语言·前端·javascript
哲此一生9841 小时前
搭建Vue3工程(去除不必要的文件)
前端·javascript·vue.js
心止水j1 小时前
spark
javascript·数据库·spark
黑云压城After4 小时前
H5使用环信实现视频或语音通话
前端·javascript·vue.js
未来之窗软件服务5 小时前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
牧杉-惊蛰7 小时前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js
C+ 安口木8 小时前
vue中监听window某个属性被添加或值的变化
前端·javascript·vue.js
FuckPatience8 小时前
前后端分离项目部署完成后 前后端交互过程
vue.js·asp.net
CoderYanger8 小时前
前端基础-HTML入门保姆级课堂笔记
前端·javascript·css·html
赛博切图仔8 小时前
qiankun、micro-app、wujie,2025年我们该选谁?
前端·javascript