el-select样式自定义

输入框样式的修改

<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>

下拉框样式的修改

// 注意：此时一定要在 <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>

完整代码

<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>