修改el-select樣式


popper-append-to-body屬性是Element-UI官方文檔中提供的一個屬性,該屬性的用途就是將el-select選項的內容移動div#app當中,默認值是true

<el-select
    :popper-append-to-body="false"
    v-model="taskType"
    placeholder="請選擇"
    size="mini"
    class="select-style"
    popper-class="select-popper"
  >

css

.hello{
  // 未選中任何選項的時候 placeholder的樣式 需要先選中父元素 增加權重
  /deep/ input::-webkit-input-placeholder {
    color: #fff;
  }
  /deep/  input::-moz-input-placeholder {
    color: #fff;
  }
  /deep/  input::-ms-input-placeholder {
    color: #fff;
  }

  //修改的是el-input的樣式 
  //一種方法是設置最里層el-input__inner的背景色 外層的兩級父元素設置為透明色
  //另一種方法是從el-select到el-input__inenr的背景色都設置為需要的顏色
  /deep/ .el-select,
  /deep/ .el-input,
  /deep/ .el-input__inner{
    background-color:#08164D ;
    color:#fff;
    border:0px;
    border-radius:0px;
    text-align: center;
  }

  //el-input聚焦的時候 外層的border會有一個樣式
  /deep/ .el-select .el-input.is-focus .el-input__inner{
    border:0px;
  }

  //修改的是el-input上下的小圖標的顏色
  /deep/ .el-select .el-input .el-select__caret{
    color:#fff;
  }

  //修改總體選項的樣式 最外層
  /deep/ .el-select-dropdown{
    background-color: #08164d;
    margin: 0px;
    border:0px;
    border-radius: 0px;
  }

  //修改單個的選項的樣式
  /deep/ .el-select-dropdown__item{
    background-color: transparent;
    color:#fff;
  }

  //item選項的hover樣式
  /deep/ .el-select-dropdown__item.hover, 
  /deep/ .el-select-dropdown__item:hover{
    color:#409eff;
  }

  //修改的是下拉框選項內容上方的尖角
  /deep/ .el-popper .popper__arrow, .el-popper .popper__arrow::after{
    display: none;
  }
} 


免責聲明!

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



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