当前位置: 首页 > news >正文

修改element-ui日期下拉框datetimePicker的背景色样式

如图: 

1、修改背景色

.el-date-picker.has-sidebar.has-time {

    background: #04308D;

    color: #fff;

    border: 1px solid #326AFF

}

.el-date-picker__header-label {

    color: #ffffff;

}

.el-date-table th {

    color: #fff;

}

.el-icon-d-arrow-left:before {

    color: #fff;

}

.el-icon-arrow-left:before {

    color: #fff;

}

.el-icon-arrow-right:before {

    color: #fff;

}

.el-icon-d-arrow-right:before {

    color: #fff;

}

.el-picker-panel__footer {

    background-color: #04308D;

    border: 1px solid #326AFF

}

.el-picker-panel [slot=sidebar], .el-picker-panel__sidebar {

    background-color: #04308D;

    border-right: 1px solid #326AFF;

}

.el-picker-panel__shortcut {

    color: #fff;

}

.el-date-picker__time-header {

    border-bottom: 1px solid #326AFF;

}

.el-popper[x-placement^=bottom] .popper__arrow::after {

    top: 1px;

    margin-left: -6px;

    border-top-width: 0;

    border-bottom-color: #04308D;

}

.el-popper[x-placement^=top] .popper__arrow::after {

    bottom: 1px;

    margin-left: -6px;

    border-top-color: #326AFF;

    border-bottom-width: 0;

}

.el-picker-panel {

    background: #04308D;

    color: #fff;

}

.el-date-table td.in-range div, .el-date-table td.in-range div:hover, .el-date-table.is-week-mode .el-date-table__row.current div, .el-date-table.is-week-mode .el-date-table__row:hover div {

    background-color: #326AFFc9;

}

.el-date-range-picker__time-header{

    border-bottom: 1px solid #326AFF;

}

.el-date-range-picker__content.is-left{

    border-right: 1px solid #326AFF;

}

2、修改输入框

.el-input__wrapper {

    border: 1px solid #326AFF;

    box-shadow: 0 0 0 0px #326AFF inset;

    background: #04308D !important;

}

.el-input__wrapper .el-input__inner {

    background: #04308D !important;

    font-size: 14px;

    font-weight: 400;

    color: #FFFFFF;

}

 3、修改三角号的背景色和边框

.el-popper.is-light .el-popper__arrow::before {

    border: 1px solid #326AFF;

    background: #04308D;

    right: 0;

}

.el-popper.is-pure {

    border:  1px solid #326AFF;

}

4、修改下一天下一年按钮颜色

.el-picker-panel__icon-btn{

    color: #fff;

}

5、修改选中日期的字体颜色

.in-range{

    color: #326aff;

}

6、最下面按钮

.el-picker-panel__footer .el-button.is-text {

    color: #fff;

    border: 0 solid transparent;

    background-color: transparent;

}

.el-picker-panel__footer .el-button{

    background-color: #326aff;

    border: 1px solid #326AFF;

    color: #fff;

}

.el-button.is-text:not(.is-disabled):hover {

    background-color: #326aff;

}

7、全部代码

.el-date-picker.has-sidebar.has-time {background: #04308D;color: #fff;border: 1px solid #326AFF
}
.el-date-picker__header-label {color: #ffffff;
}
.el-date-table th {color: #fff;
}
.el-icon-d-arrow-left:before {color: #fff;
}
.el-icon-arrow-left:before {color: #fff;
}
.el-icon-arrow-right:before {color: #fff;
}
.el-icon-d-arrow-right:before {color: #fff;
}
.el-picker-panel__footer {background-color: #04308D;border: 1px solid #326AFF
}
.el-picker-panel [slot=sidebar], .el-picker-panel__sidebar {background-color: #04308D;border-right: 1px solid #326AFF;
}
.el-picker-panel__shortcut {color: #fff;
}
.el-date-picker__time-header {border-bottom: 1px solid #326AFF;
}
.el-popper[x-placement^=bottom] .popper__arrow::after {top: 1px;margin-left: -6px;border-top-width: 0;border-bottom-color: #04308D;
}
.el-popper[x-placement^=top] .popper__arrow::after {bottom: 1px;margin-left: -6px;border-top-color: #326AFF;border-bottom-width: 0;
}
.el-picker-panel {background: #04308D;color: #fff;
}
.el-date-table td.in-range div, .el-date-table td.in-range div:hover, .el-date-table.is-week-mode .el-date-table__row.current div, .el-date-table.is-week-mode .el-date-table__row:hover div {background-color: #326AFFc9;
}
.el-date-range-picker__time-header{border-bottom: 1px solid #326AFF;
}
.el-date-range-picker__content.is-left{border-right: 1px solid #326AFF;
}
//三角号
.el-popper.is-light .el-popper__arrow::before {border: 1px solid #326AFF;background: #04308D;right: 0;
}
.el-popper.is-pure {border:  1px solid #326AFF;
}
.el-input__wrapper {border: 1px solid #326AFF;box-shadow: 0 0 0 0px #326AFF inset;background: #04308D !important;}.el-input__wrapper .el-input__inner {background: #04308D !important;font-size: 14px;font-weight: 400;color: #FFFFFF;
}
// 下方按钮
.el-picker-panel__footer .el-button.is-text {color: #fff;border: 0 solid transparent;background-color: transparent;
}
.el-picker-panel__footer .el-button{background-color: #326aff;border: 1px solid #326AFF;color: #fff;
}
.el-button.is-text:not(.is-disabled):hover {background-color: #326aff;
}
.in-range{color: #326aff;}

 放到assets里面间一个scss文件

main.js引用即可全局使用

http://www.lryc.cn/news/389910.html

相关文章:

  • Linux—— 逻辑运算符,压缩和解压缩
  • 音视频入门基础:H.264专题(6)——FFmpeg源码:从H.264码流中提取NALU Header、EBSP、RBSP和SODB
  • STM32实现按键单击、双击、长按、连按功能,使用状态机,无延时,不阻塞
  • C#之Delta并联机械手的视觉同步分拣
  • 01:Linux的基本命令
  • GNSS 载波、测距码和导航电文的关系简介
  • deepE 定位系统卡顿问题实战(一) ----------- 锁造成的阻塞问题
  • YOLOv5改进 | 主干网络 | ODConv + ConvNeXt 增强目标特征提取能力
  • TIA博途WinCC通过VB脚本从 Excel中读取数据的具体方法介绍
  • 第5篇 区块链的技术架构:节点、网络和数据结构
  • vue长列表,虚拟滚动
  • 【实战场景】记一次UAT jvm故障排查经历
  • 线性代数--行列式1
  • tensorflow神经网络
  • Python基础001
  • 【udp报文】udp报文未自动分片,报文过长被拦截问题定位
  • 某网页gpt的JS逆向
  • 【python脚本】批量检测sql延时注入
  • 在C++中如何理解const关键字的不同用法(如const变量、const成员函数、const对象等)
  • JavaSEJava8 时间日期API + 使用心得
  • 【亲测解决】Python时间问题
  • Linux屏幕驱动开发调试笔记
  • Nginx Http缓存的必要性!启发式缓存有什么弊端?
  • 【RT摩拳擦掌】RT云端测试之百度天工物接入构建(设备型)
  • Mysql和ES使用汇总
  • Android中使用performClick触发点击事件
  • 重生之我要学后端01--后端语言选择和对应框架选择
  • C语言 | Leetcode C语言题解之第206题反转链表
  • Flink Window DEMO 学习
  • library source does not match the bytecode for class SpringApplication