2021-08-24

element ui el-select样式修改

在开发中可能会遇到对el-select的样式风格做统一修改，为了保持统一色调

  .el-select {
    width: 100px;
    height: 28px;
    margin-left: 11px;
    & ::placeholder {
      color: #047cff;
    }
    ::v-deep .el-input--suffix {
      height: 100%;

      > input {
        height: 100%;
        border: 1px solid #047cff;
        color: #047cff;
        background-color: transparent;
      }

      .el-input__suffix {
        height: 40px;
        top: -6px;

        .el-icon-arrow-up:before {
          // content: "";
          color: #047cff;
        }
      }
    }
  }

日期选择器样式调整

  //日期选择器样式修改
  .el-range-editor.el-input__inner {
    background-color: transparent;
    border: 1px solid #047cff;
  }
  ::v-deep .el-range-separator {
    color: #047cff;
  }
  ::v-deep .el-range-editor--small .el-range-input {
    background-color: transparent;
    color: #047cff;
  }
  .el-date-editor {
    & ::placeholder {
      color: #047cff;
    }
  }

效果如下：