el-select,el-date-picker样式修改

el-select下拉框样式自定义不生效，添加:popper-append-to-body="false"属性

<el-select v-model="value" placeholder="请选择" :popper-append-to-body="false">
   <el-option v-for="item in options" :key="item.value" :label="item.label"         
   :value="item.name">
   </el-option>
</el-select>

<style>
.el-select {
  position: absolute;
  top: -3rem;
  right: 1rem;
  width: 11.12rem;
  height: 3.6rem;
  border-radius: 0.5rem;
  font-family: Source Han Sans, Source Han Sans;
  font-weight: 400;
  font-size: 1.8rem;
  color: #FFFFFF;
  line-height: 2.6rem;
  text-align: left;
  font-style: normal;

  ::v-deep .el-select-dropdown {
    color: #FFFFFF;
    background: none;
  }

  ::v-deep .el-input__inner {
    font-size: 1.8rem;
    color: #FFFFFF;
    border: 0.1rem solid #47AFFF;
    background: rgba(31, 215, 255, 0.34);
  }

  ::v-deep .el-scrollbar {
    background: url($oss + "/ecological-environment/option-bg.png") no-repeat;
    background-size: 100% 100%;
  }

  ::v-deep .el-select-dropdown__item {
    color: rgba(255, 255, 255, 1);
  }

  ::v-deep .el-select-dropdown__item.hover,
  ::v-deep .el-select-dropdown__item:hover {
    color: RGBA(1, 255, 230, 1);
    background-color: rgba(193, 237, 240, 1);
  }
}
</style>

el-date-picker下拉框样式自定义不生效，添加popper-class="popperClass"属性

<el-date-picker popper-class="popperClass" v-model="startDate" type="date" placeholder="选择日期"></el-date-picker>

<style lang="scss" >
// 这里是下拉框的样式，需要修改什么样式，就直接通过浏览器查看你要改的样式，然后就改就行
.popperClass {
  background: rgba(30, 84, 128, 0.8);

  //图标样式
  .el-icon {
    color: #fff;
  }

  //头部样式
  .el-date-picker__header-label {
    color: #fff;
    font-size: 18px;
  }

  // 星期样式
  .el-date-table th {
    color: #fff;
  }

  ::v-deep .el-date-picker table {
    color: #fff !important;
  }

  .el-picker-panel__icon-btn {
    color: #fff;
  }

  // 时间选择器层样式
  .el-picker-panel {
    z-index: 2007;
    color: #fff !important;
    background: rgba(30, 84, 128, 0.8);
    border: 1px solid rgba(29, 128, 218, 1);
  }

  .el-date-table td div {
    color: #fff;
  }
}

// 输入框的样式在这里改就行
.time-box {
  .el-input__wrapper {
    color: #fff;
    background-color: rgba(30, 84, 128, 0.8);
    border-radius: 0px;
    box-shadow: none;
    // width: 50px;
  }

  .el-input__inner {
    color: #ffffff;
    background-color: rgba(30, 84, 128, 0.8);
  }

  .el-date-editor.el-input,
  .el-date-editor.el-input__wrapper {
    width: 120px;
  }

  .el-input__wrapper:hover {
    box-shadow: none;
  }

  .el-input {
    --el-input-focus-border-color: transparent;
    --el-input-border: none;
  }

  .el-popper.is-light {
    background: #255783;
    border: 1px solid #106c94;
  }
}

// 弹出框popper层样式
.el-picker__popper.el-popper {
  color: #fff;
  background: rgba(30, 84, 128, 0.8);
  border: 1px solid rgba(29, 128, 218, 1);
  box-shadow: rgba(30, 84, 128, 0.8);
}

// 弹出框外部尖三角样式
.el-popper.is-light .el-popper__arrow::before {
  color: #fff;
  border: 1px solid rgba(29, 128, 218, 1);
  background: rgba(29, 128, 218, 1);
}

.line-bar {
  width: 95% !important;
}
</style>