element ui 日期组件样式修改不生效

先new一个对象.

已于 2022-08-26 10:07:10 修改

阅读量1.8k

点赞数 2

文章标签： ui vue.js javascript

于 2022-08-26 10:04:59 首次发布

本文链接：https://blog.csdn.net/Gyh9421/article/details/126537638

版权

在当前页面增加一个style标签，标签上去掉 scoped 即可

下面为日期时间选择器的样式，仅供参考，自行更改 使用的是scss

<style lang="scss">
.el-picker-panel {
  color: #cddef1 !important;
  border: 1px solid #2986ce;
  background: rgba(15, 28, 49, 0.8);
  .el-date-picker__header-label {
    color: #cddef1 !important;
  }
  .el-date-table th {
    color: #cddef1 !important;
    border-bottom: 1px solid #2986ce;
  }
  .el-date-table td.in-range div {
    color: #cddef1 !important;
    background: #1a3e61;
  }
}

.el-picker-panel__footer {
  color: #cddef1 !important;
  border: 1px solid #2986ce;
  background: rgba(15, 28, 49, 0.8);

  .is-disabled,
  .el-button--default,
  .el-button--mini {
    color: #fff;
    border: 1px solid #2986ce;
    background: linear-gradient(to top, #3399ec, #61c6ec);
  }
  .el-button--text {
    color: #409eff;
    border: none;
    background: none;
  }
}
.el-picker-panel {
  color: #cddef1 !important;
  border: 1px solid #2986ce;
  background: rgba(15, 28, 49, 0.8);
  .el-date-picker__header-label {
    color: #cddef1 !important;
  }
  .el-date-table th {
    color: #cddef1 !important;
    border-bottom: 1px solid #2986ce;
  }
}
.el-input__inner {
  height: 36px;
  border-radius: 4px;
  background-color: rgba(15, 28, 49, 0.8);
  border: 1px solid #2986ce;
  color: #cddef1;
}
.el-picker-panel__footer {
  color: #cddef1 !important;
  border: 1px solid #2986ce;
  background: rgba(15, 28, 49, 0.8);
  .is-plain {
    color: #fff;
    border: 1px solid #2986ce;
    background: linear-gradient(to top, #3399ec, #61c6ec);
  }
}
.el-input.is-disabled .el-input__inner {
  background-color: rgba(15, 28, 49, 0.8);
  border: 1px solid #2986ce;
  color: #cddef1;
}
.el-date-editor .el-range-input {
  color: #cddef1;
}
.el-date-editor .el-range-input::-webkit-input-placeholder {
  color: #707677 !important;
}
.el-date-range-picker__editor input::-webkit-input-placeholder {
  /*WebKit browsers*/
  color: #707677;
}

.el-date-range-picker__content.is-left {
  border-right: 1px solid #2986ce;
}
/deep/ .el-date-range-picker__time-header {
  border-right: 1px solid #2986ce !important;
}
.el-date-editor .el-range-separator {
  color: #cddef1;
  margin-top: -5px;
}
//日期前方图标
.el-icon-time:before {
  content: "";
}
//时间框样式
.el-time-panel {
  background-color: rgba(15, 28, 49, 0.8);
  border: 1px solid #2986ce;
  // color: #cddef1;
}

.el-date-range-picker__time-header {
  border-bottom: 1px solid #2986ce;
}
.el-time-panel__footer {
  border-top: 1px solid #2986ce;
}
.el-time-panel__content::after,
.el-time-panel__content::before {
  border-top: 1px solid #2986ce;
  border-bottom: 1px solid #2986ce;
}
.el-time-spinner__item {
  color: #cddef1;
}

.el-time-spinner__item:hover:not(.disabled):not(.active) {
  color: #cddef1;
  background: #1a3e61;
}
.el-scrollbar__view li:hover {
  color: #cddef1;
  background: #1a3e61;
}
.el-time-spinner__item.active:not(.disabled) {
  color: #2986ce;
}
.el-time-panel__btn.confirm {
  color: #fff;
}
.el-time-panel__btn.cancel {
  color: #409eff;
}


</style>