修改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;
  }
} 
posted @ 2021-07-21 18:05  X1nChenH  阅读(4984)  评论(0编辑  收藏  举报