elementui（el-date-picker）日期选择器的日历样式修改

最新推荐文章于 2025-05-26 10:25:27 发布

长箭已搭弓

最新推荐文章于 2025-05-26 10:25:27 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签：前端

本文链接：https://blog.youkuaiyun.com/include_computer/article/details/119946173

vue 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了如何调整和优化日历组件的样式，以增强用户体验，包括背景颜色、文字颜色、边框等元素，并展示了关键CSS代码段落。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


/*日历样式----------------------------------------------------------*/
  .selfDate {
    background-color: #08294c !important;
    color: #61b7ff;
    border: 1px solid #85e9fc;

    .el-picker-panel__sidebar {
      background-color: #08294c !important;
      border: 1px solid #85e9fc;

      .el-picker-panel__shortcut {
        color: #61b7ff;
      }
    }

    .el-date-picker__header-label {
      color: #61b7ff;
    }

    .el-date-picker__header--bordered {
      border-bottom: solid 1px #85e9fc;
    }

    .el-picker-panel__content {
      .el-year-table td .cell, .el-month-table td .cell {
        color: #61b7ff;
      }
    }

    .el-picker-panel__icon-btn {
      color: #61b7ff;
    }

    .el-date-range-picker__content .el-date-range-picker__header div {
      color: #7aa8fe;
    }

    .el-date-table td.next-month,
    .el-date-table td.prev-month {
      color: #255687;
    }

    .el-date-table td.in-range div {
      background-color: #183870;
    }

    .el-date-range-picker__content.is-left {
      border: 1px solid #244588;

    }

    .el-date-table th {
      color: #7aa8fe;
    }

    .el-date-table th {
      border-bottom: 1px solid #244588;
    }

    .el-date-table td.start-date div,
    .el-date-table td.end-date div {
      color: #fff;

    }

    .el-date-table td.start-date span,
    .el-date-table td.end-date span {
      background: #083671;
    }
  }
  /*日历样式------------------------------------------------------------------------*/