elementUI datepicker 样式

最新推荐文章于 2023-09-13 16:15:12 发布

子言慕雨

最新推荐文章于 2023-09-13 16:15:12 发布

阅读量628

点赞数

分类专栏： Vue 文章标签：前端 vue.js elementui

本文链接：https://blog.csdn.net/TY_GYY/article/details/127093309

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

结果

在这里插入图片描述

代码

//datepicker
.el-picker-panel{
  background: $--color-extra !important;
  border-radius: 20px;
  color: white !important;
  border: 1px solid #C7FEFB;
}
//时间选择内容头部
.el-date-picker__header--bordered{
  border-bottom: 1px solid white !important;
}
// 左右箭头
.el-picker-panel__icon-btn, .el-date-picker__header-label{
  color:white !important;
}
//年，月
.el-year-table td .cell,.el-month-table td .cell{
  color:white;
  font-size: 14px;
}
//年月选中/滑过样式
.el-year-table td .cell:hover, .el-year-table td.current:not(.disabled) .cell,.el-year-table td.today .cell,
.el-month-table td .cell:hover, .el-month-table td.current:not(.disabled) .cell,.el-month-table td.today .cell{
  color: #fff !important;
  background-color: #01ccff !important;
  border-radius: 4px !important;
  font-size: 15px !important;
  width: 60px;
  text-align: center;
}