修改el-select和el-input样式；修改element-plus的下拉框el-select样式；修改placeholder样式

---

---

一、修改el-select样式

1.方案1使用popper-class和class

popper-class是选择器下拉菜单的自定义类名

    <el-select popper-class="el_select_dark_popper" class="select_dark_box" v-model="row.regionName" filterable placeholder="请选择" clearable @change="changeVal">
         <el-option v-for="item in region_name_list" :disabled="item.disabled" :key="item" :value="item.value" :label="item.name" />
   </el-select>





// 单选框类名
.select_dark_box {
  .el-select__wrapper.is-filterable {
    background-color: transparent; // 下拉框内透明背景色
    span {
      color: #fff; // 下拉框内文本样式
    }
  }
  .el-select__selected-item {
    .el-tag--light {
      background-color: #7bb5db; // 多选的下拉tag背景
    }
  }
}
// 单选框的下拉展开类名
.el_select_dark_popper {
  background-color: #234a71 !important; // 展开下拉背景
  border: 1px solid #234a71 !important; // 展开下拉边框
  .el-popper__arrow::before {
    border-top: 1px solid #234a71 !important; // 箭头按钮边框
    background-color: #234a71 !important; // 箭头按钮背景色
  }
  .el-select-dropdown {
    .is-hovering {
      background-color: #234a71; // 下拉hover背景
    }
  }
  .el-select-dropdown__item.is-disabled {
    color: #868686 !important; // 禁用
  }
  .el-select-dropdown__item.is-selected {
    color: #2a8fd2 !important; // 选中
    font-weight: bold;
  }
  .el-select-dropdown__item {
    color: #fff !important; // 可选
  }

  .el-select-dropdown__list {
    background-color: #244461;
  } // 下拉列所有背景
}

2.方案2使用teleported

修改el-select样式

.select_box{
  // 默认placeholder
  :deep .el-input__inner::placeholder {
    font-size: 14px;
    font-weight: 500;
    color: #3E534F;
  }
  // 默认框状态样式更改
  :deep .el-input__wrapper {
    height: 42px;
    background-color: rgba(0,0,0,0)!important;
    box-shadow: 0 0 0 1px #204C42 inset!important;
    --el-select-focus-border-color:#5AC087!important;
    --el-select-hover-border-color: #5AC087!important;
  }
  // 修改下拉框样式-点击框focus
  :deep .is-focus .el-input__wrapper {
    box-shadow: 0 0 0 1px #5AC087 inset!important;
    --el-select-focus-border-color:#5AC087!important;
    --el-select-hover-border-color: #5AC087!important;
  }
  :deep .el-select__caret {
    color:#5AC087!important;  // 清除按钮
  }
  :deep .el-input__inner {
    color: #5AC087!important; // 选中字体色
  }
}

// 下拉框-展开样式
.el-select-dropdown__item.selected {
  // background-color: #83e818!important; // 选中
}
.el-select-dropdown__item.hover {
  background-color: #498f6c!important; // hover
}
:deep .el-dropdown-menu__item:not(.is-disabled) {
  // color: #182F23!important; // disabled
}
.el-select-dropdown__item {
  color: #4FC78A !important; // 下拉项颜色
}
:deep .el-popper{
  background-color: #121f1b!important; // 展开下拉背景
  border: 1px solid #498f6c!important; // 展开下拉边框
}
:deep .el-popper .el-popper__arrow::before{
  border-top: 1px solid #498f6c!important; // 箭头按钮边框
  background-color: #121f1b!important; // 箭头按钮背景色
}

二、修改el-input样式

input如下

<el-input clearable v-model="name" placeholder="请输入" class="input-with-select input_box" style="width: 148px;margin: 0 40px;position: absolute;right:67px;" />

.input_box{
  // 默认状态样式更改
  height: 42px;
  --el-input-bg-color:rgba(0,0,0,0)!important;
  --el-input-border-color:#204C42!important;
  --el-input-focus-border-color:#5AC087!important;
  --el-input-hover-border-color: #5AC087!important;

  /* 只更改具有.el-input类名的元素的占位符文本样式 */
  :deep .el-input__inner::placeholder {
    font-size: 14px;
    font-weight: 500;
    color: #3E534F;
  }
  // 清除按钮
  :deep .el-input__clear {
    color: #5AC087!important;
  }
  :deep .el-input__inner {
    color: #5AC087!important; // 字体色
  }

}

三、修改el-select的在老版本多出来轮廓样式

1.复现问题样式：

在72版本谷歌浏览器上，选择下拉框内容时候，会有蓝色轮廓

2.找到hover或focus元素区域

方法：
1.鼠标点击下拉打开下拉框后，鼠标左键一直按住不送，同时移动鼠标到右侧控制台的元素选择按钮图标上（只有按住左键不送，那个下拉元素才不会关闭掉），
2.移动到元素选择按钮图标上后，左键才可以松开，然后点击一下元素选择按钮图标，就可以正常选中摸到左侧的下拉元素了。
3.选择:hov里的:focus可以模拟触发正常鼠标操作出来的那个异常蓝色样式
4.输入:focus过滤，可以发现是outline的问题导致的
5.修改代码如下

.el-select__popper:focus {
  outline: none !important;
}