element 下拉框整體樣式修改


組件里的下拉框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/


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM