组件里的下拉框el-select是这样的：

 但是写项目时难免修改样式，所以我整体的修改了一遍（参考）：

<div class="the_national">
　　<el-select v-model="value">
　　　　<el-option
　　　　　　v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          class="provinces_select"
　　　　>
　　　　</el-option>
　　</el-select>
</div>

<style lang="scss" scoped>
.the_national {
    cursor: pointer;
    font-size: 24px;
    font-weight: 500;
    font-family: "PingFang SC";
    text-align: center;
    padding-top: 15px;
    ::v-deep input::-webkit-input-placeholder {
      color: #fff;
    }
    ::v-deep input::-moz-input-placeholder {
      color: #fff;
    }
    ::v-deep input::-ms-input-placeholder {
      color: #fff;
    }
    // input框-
    ::v-deep .el-select,
    ::v-deep .el-input,
    ::v-deep .el-input__inner {
      width: 120px;
      background-color: rgba(0, 0, 0, 0.2);
      color: #106393;
      border: 0px;
      border-radius: 0px;
      font-size: 24px;
    }
    // input框-右侧的箭头-
    ::v-deep .el-select .el-input .el-select__caret {
      color: #106393;
    }
    // option选项-上面的箭头
    ::v-deep.el-popper[x-placement^="bottom"] .popper__.arrow::before {
      border: none !important;
      z-index: 999;
    }
    ::v-deep.el-popper[x-placement^="bottom"] .popper__arrow::after {
      border: none !important;
      z-index: 999;
    }
    ::v-deep.popper__arrow {
      border: none;
    }
    // option选项-最外层
    ::v-deep.el-select-dropdown {
      border: none !important;
      background: #192f4a !important;
      z-index: 999;
    }
    // option选项-文字样式
    ::v-deep.el-select-dropdown__item {
      color: rgba(255, 255, 255, 0.55) !important;
      z-index: 999;
    }
    // 移入option选项-样式调整
    ::v-deep.el-select-dropdown__item.hover{
      background-color: rgba(255,255,255,0.1);
      color: rgba(255, 255, 255, 0.9) !important;
      z-index: 999;
    }
  }
</style>

如果option样式不生效，可以在标签中加上 :popper-append-to-body="false"

<el-select :popper-append-to-body="false">

 如果是vue3可把样式中的 ::v-deep 改成 /deep/