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>
相关推荐
十里-26 分钟前
在 Vue2 中为 Element-UI 的 el-dialog 添加拖拽功能
前端·vue.js·ui
左耳咚1 小时前
项目开发中从补码到精度丢失的陷阱
前端·javascript·面试
D_C_tyu1 小时前
Vue3 + Element Plus 实现前端手动分页
javascript·vue.js·elementui
星光一影1 小时前
供应链进销存源码uniapp全开源ERP多仓库管理系统pc+app手机端
mysql·elementui·uni-app·开源·php·phpstorm·1024程序员节
黑云压城After1 小时前
vue2实现图片自定义裁剪功能(uniapp)
java·前端·javascript
千里码aicood1 小时前
python+vue旅游购票管理系统设计(源码+文档+调试+基础修改+答疑)
vue.js·python·旅游
用户47949283569153 小时前
从 58MB 到 2.6MB:我是如何将 React 官网性能提升 95% 的
前端·javascript
该用户已不存在3 小时前
7个让全栈开发效率起飞的 Bun 工作流
前端·javascript·后端
芙蓉王真的好13 小时前
Angular CDK 响应式工具指南:从基础到自适应布局应用
前端·javascript·angular.js
麦麦大数据3 小时前
F038 vue+flask 微博舆情热搜情感分析大数据分析系统|前后端分离架构
vue.js·架构·flask·情感分析·微博·舆情分析