elementUI datepicker style

result

Insert image description here

code

//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;
}

Guess you like

Origin blog.csdn.net/TY_GYY/article/details/127093309