element ui下拉框多选（(Select)解决：Element-ui 中 Select 选择器下拉框样式及输入框样式的修改问题(背景色透明与悬停背景色变化与下拉框边距变化等操作)）

Ⅰ                 、Element-ui 提供的组件与想要目标情况的对比：

1
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
、Element-ui 提供组件情况：

其一















、Element-ui 自提供的代码情况为(示例的代码)：

// Element-ui 自提供的代码： <template> <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> </template> <script> export default { data() { return { options: [{ value: 选项1, label: 黄金糕 }, { value: 选项2, label: 双皮奶 }, { value: 选项3, label: 蚵仔煎 }, { value: 选项4, label: 龙须面 }, { value: 选项5, label: 北京烤鸭 }], value: } } } </script>

代码地址：https://element.eleme.cn/#/zh-CN/component/select

其二  
  
  
  
  
  
  
  
 、页面的显示情况为：

A 
  
  
  
  
  
  
  
 、el-select 输入栏的情况展示：

B


 


 


 


 


 


 


 


 
、el-select 下拉框的背景情况展示：

C 
 
 
 
 
 
 
 
、el-select 下拉框的悬停情况展示(即：默认悬停时的字体背景颜色为灰色)：

2  
   
   
   
   
   
   
   
  、目标修改后的情况：

A

 

 

 

 

 

 

 

 
、el-select 输入栏的情况展示(即：输入栏的长度设置及背景颜色设置)： B
 

 

 

 

 

 

 

 
、el-select 下拉框的背景情况展示(即：下拉框的背景颜色 
  
  
  
  
  
  
  
 ，样式等的修改)： C                 、el-select 下拉框的悬停情况展示(即：修改默认的悬停颜色)：

Ⅱ
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
、实现 Select 选择器下拉框样式及输入框样式变化的过程：

1















、输入框样式的修改：

其一                         、代码：

<style lang="scss" scoped> // 设置输入框的长度为：102px; /deep/.el-input--suffix .el-input__inner { padding-right: 102px; } // 设置输入框的背景色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
、字体颜色























、边框属性设置； /deep/.el-input__inner { background-color: #003e00; color: #fff; border: 1px solid #e43179; } </style>

其二                 、效果展示：

A
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
、输入框的效果展示(即：可以设置成想要背景与边框的效果)：

B















、下拉框的效果展示：

2  
  
  
  
  
  
  
  
 、下拉框样式的修改：

其一 
  
  
  
  
  
  
  
 、代码：

// 注意：此时一定要在 <el-select> 里添加 :popper-append-to-body="false" 属性； // 若未加入 :popper-append-to-body="false" 属性 
  
  
  
  
  
  
  
  ，那么此时渲染后的 DOM 元素不在 #app 元素内部； // 原因: el-select 里面的 select-popper 元素渲染后会脱离 #app ,因此使用深度选择器也无法定位该元素; <style lang="scss" scoped> // 设置下拉框的背景颜色及边框属性； /deep/.el-select-dropdown { // 若不将下拉框的背景颜色设置为：transparent

 


 


 


 


 


 


 


 

，那么做不出来半透明的效果； // 因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色 
 
 
 
 
 
 
 
，重叠后的效果展示； background-color: transparent; border: 1px solid blue; } // 设置下拉框的字体属性及背景颜色； .el-select-dropdown__item { font-size: 7px; line-height: 19px; color: #fff; font-weight: 200; background-color: #003e00; } // 设置下拉框列表的 padding 值为：0；(即：样式调整) /deep/.el-select-dropdown__list { padding: 0; } // 设置输入框与下拉框的距离为：0; (即：样式调整) /deep/.el-popper[x-placement^="bottom"] { margin-top: 0px; } // 将下拉框上的小箭头取消；(看着像一个箭头 
   
   
   
   
   
   
   
   ，其实是两个重叠在一起的箭头) /deep/.el-popper .popper__arrow, /deep/.el-popper .popper__arrow::after { display: none; } // 设置鼠标悬停在下拉框列表的悬停色； .el-select-dropdown__item:hover { background-color: rgba(0, 225, 219, 0.690196078431373); } </style>

其二


 


 


 


 


 


 


 


 
、效果展示：

A 
 
 
 
 
 
 
 
、输入框的效果展示：

B  
   
   
   
   
   
   
   
  、下拉框的效果展示： 3

 

 

 

 

 

 

 

 
、整个代码的页面展示效果为：

其一
 

 

 

 

 

 

 

 
、输入框的效果展示：

其二                 、下拉框的效果展示：

Ⅲ
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
、修改 Select 选择器下拉框及输入框达到目标效果的过程：

1















、整体的代码：

<template> <div> <el-row type="flex" justify="end"> <el-col :span="6"> <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> </el-col> </el-row> </div> </template> <script> export default { data() { return { options: [ { value: "选项1", label: "黄金糕", }, { value: "选项2", label: "双皮奶", }, { value: "选项3", label: "蚵仔煎", }, { value: "选项4", label: "龙须面", }, { value: "选项5", label: "北京烤鸭", }, ], value: "", }; }, }; </script> <style lang="scss" scoped> /deep/.el-input--suffix .el-input__inner { padding-right: 102px; } /deep/.el-input__inner { background-color: #00083e; color: #fff; border: 1px solid #31cae4; } .el-select-dropdown__item { font-size: 7px; line-height: 19px; color: #fff; font-weight: 200; background-color: #00083e; } /deep/.el-select-dropdown { background-color: transparent; border: 1px solid blue; } /deep/.el-select-dropdown__list { padding: 0; } /deep/.el-popper[x-placement^="bottom"] { margin-top: 0px; } /deep/.el-popper .popper__arrow, /deep/.el-popper .popper__arrow::after { display: none; } .el-select-dropdown__item:hover { background-color: rgba(0, 225, 219, 0.690196078431373); } </style>

2                         、效果展示：

Ⅳ
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
、小结：

其一























、哪里有不对或不合适的地方
 

 

 

 

 

 

 

 
，还请大佬们多多指点和交流！ 其二                 、有兴趣的话
 

 

 

 

 

 

 

 

，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482