Ⅰ、Element-ui 提供的組件與想要目標(biāo)情況的對比：

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: '選項(xiàng)1',
          label: '黃金糕'
        }, {
          value: '選項(xiàng)2',
          label: '雙皮奶'
        }, {
          value: '選項(xiàng)3',
          label: '蚵仔煎'
        }, {
          value: '選項(xiàng)4',
          label: '龍須面'
        }, {
          value: '選項(xiàng)5',
          label: '北京烤鴨'
        }],
        value: ''
      }
    }
  }
</script>

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

其二、頁面的顯示情況為：

A、el-select 輸入欄的情況展示：

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

C、el-select 下拉框的懸停情況展示(即：默認(rèn)懸停時的字體背景顏色為灰色)：

2、目標(biāo)修改后的情況：

A、el-select 輸入欄的情況展示(即：輸入欄的長度設(shè)置及背景顏色設(shè)置)：

B、el-select 下拉框的背景情況展示(即：下拉框的背景顏色，樣式等的修改)：

C、el-select 下拉框的懸停情況展示(即：修改默認(rèn)的懸停顏色)：

Ⅱ、實(shí)現(xiàn) Select 選擇器下拉框樣式及輸入框樣式變化的過程：

1、輸入框樣式的修改：

其一、代碼：

<style lang="scss" scoped>

// 設(shè)置輸入框的長度為：102px;
/deep/.el-input--suffix .el-input__inner {
  padding-right: 102px;
}

// 設(shè)置輸入框的背景色、字體顏色、邊框?qū)傩栽O(shè)置；
/deep/.el-input__inner {
  background-color: #003e00;
  color: #fff;
  border: 1px solid #e43179;
}
</style>

其二、效果展示：

A、輸入框的效果展示(即：可以設(shè)置成想要背景與邊框的效果)：

B、下拉框的效果展示：

2、下拉框樣式的修改：

其一、代碼：

// 注意：此時一定要在  里添加 :popper-append-to-body="false" 屬性；
// 若未加入 :popper-append-to-body="false" 屬性，那么此時渲染后的 DOM 元素不在 #app 元素內(nèi)部；
// 原因: el-select 里面的 select-popper 元素渲染后會脫離 #app ,因此使用深度選擇器也無法定位該元素;

<style lang="scss" scoped>

// 設(shè)置下拉框的背景顏色及邊框?qū)傩裕?/span>
/deep/.el-select-dropdown {
  // 若不將下拉框的背景顏色設(shè)置為：transparent，那么做不出來半透明的效果；
  // 因?yàn)槠渥罱K的顯示為：下拉框有一個背景顏色且下拉框的字體有一個背景顏色，重疊后的效果展示；
  background-color: transparent;
  border: 1px solid blue;
}

// 設(shè)置下拉框的字體屬性及背景顏色；
.el-select-dropdown__item {
  font-size: 7px;
  line-height: 19px;
  color: #fff;
  font-weight: 200;
  background-color: #003e00;
}

// 設(shè)置下拉框列表的 padding 值為：0；(即：樣式調(diào)整)
/deep/.el-select-dropdown__list {
  padding: 0;
}

// 設(shè)置輸入框與下拉框的距離為：0; (即：樣式調(diào)整)
/deep/.el-popper[x-placement^="bottom"] {
  margin-top: 0px;
}

// 將下拉框上的小箭頭取消；(看著像一個箭頭，其實(shí)是兩個重疊在一起的箭頭)
/deep/.el-popper .popper__arrow,
/deep/.el-popper .popper__arrow::after {
  display: none;
}

// 設(shè)置鼠標(biāo)懸停在下拉框列表的懸停色；
.el-select-dropdown__item:hover {
  background-color: rgba(0, 225, 219, 0.690196078431373);
}
</style>

其二、效果展示：

A、輸入框的效果展示：

B、下拉框的效果展示：

3、整個代碼的頁面展示效果為：

其一、輸入框的效果展示：

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

Ⅲ、修改 Select 選擇器下拉框及輸入框達(dá)到目標(biāo)效果的過程：

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: "選項(xiàng)1",
          label: "黃金糕",
        },
        {
          value: "選項(xiàng)2",
          label: "雙皮奶",
        },
        {
          value: "選項(xiàng)3",
          label: "蚵仔煎",
        },
        {
          value: "選項(xiàng)4",
          label: "龍須面",
        },
        {
          value: "選項(xiàng)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、效果展示：

Ⅳ、小結(jié)：

其一、哪里有不對或不合適的地方，還請大佬們多多指點(diǎn)和交流！
其二、有興趣的話，可以多多關(guān)注這個專欄(Vue(Vue2+Vue3)面試必備專欄)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482