element ui 日期组件样式修改不生效-Toy模板网

这篇具有很好参考价值的文章主要介绍了element ui 日期组件样式修改不生效。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

下面为日期时间选择器的样式，仅供参考，自行更改 使用的是scss文章来源地址https://www.toymoban.com/news/detail-650239.html

<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>

到了这里，关于element ui 日期组件样式修改不生效的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！