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

news2024/11/20 2:24:08

如图： 

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.coloradmin.cn/o/1881872.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

MyBatis操作数据库(入门)

MyBatis操作数据库(入门)

本节目标 使用MyBatis完成简单的增删改查操作，参数传递掌握MyBatis的两种写法：注解和XML方式掌握MyBatis相关的日志配置 前言 在应用分层学习中，我们了解web应用程序一般分为三层，即Controller、Service、Dao。在之前的案例中&a…
阅读更多...
使用Nginx反向代理KKFileView遇到问题

使用Nginx反向代理KKFileView遇到问题

使用KKFileView 4.0 以上版本 在KKFileView官网上，关于使用Nginx代理，建议配置如下 一、修改Nacos 在Nginx的conf文件夹中修改 nginx.conf ,新加 红框内的IP地址为代理服务器地址（即安装KKFileView的服务器地址） 二、修改KKFil…
阅读更多...
计算机组成原理——寄存器

计算机组成原理——寄存器

文章目录 1. 寄存器 2. 带寄存器的加法器 3. 时钟信号与计算速度 1. 寄存器 上一篇D触发器可以在时钟上沿存储1位数据。如果想存储多个位（bit）的数据，就需要用多个D触发器并联实现，这种电路称之为寄存器。 寄存器是计算机中央…
阅读更多...
MySQL：表的内连接和外连接、索引

MySQL：表的内连接和外连接、索引

文章目录 1.内连接2.外连接2.1 左外连接2.2 右外连接 3.综合练习4.索引4.1见一见索引4.2 硬件理解4.3 MySQL 与磁盘交互基本单位(软件理解)4.4 (MySQL选择的数据结构)索引的理解4.5 聚簇索引 VS 非聚簇索引 5.索引操作5.1 创建索引5.2 查询索引5.3 删除索引 1.内连接 内连接实…
阅读更多...
DreamView数据流

DreamView数据流

DreamView数据流 查看DV中界面启动dag，/apollo/modules/dreamview_plus/conf/hmi_modes/pnc.pb.txt可以看到点击界面的planning按钮，后台其实启动的是/apollo/modules/planning/planning_component/dag/planning.dag和/apollo/modules/external_command…
阅读更多...
IT专业入门，高考假期预习指南

IT专业入门，高考假期预习指南

七月来临，各省高考分数已揭榜完成。而高考的完结并不意味着学习的结束，而是新旅程的开始。对于有志于踏入IT领域的高考少年们，这个假期是开启探索IT世界的绝佳时机。 一、基础课程预习指南 IT专业是一个广泛的领域，涵盖了从软件开…
阅读更多...
Datawhale机器学习day-1

Datawhale机器学习day-1

赛题 在当今科技日新月异的时代，人工智能（AI）技术正以前所未有的深度和广度渗透到科研领域，特别是在化学及药物研发中展现出了巨大潜力。精准预测分子性质有助于高效筛选出具有优异性能的候选药物。以PROTACs为例，它是…
阅读更多...
服装分销的系统架构

服装分销的系统架构

背景 服装的分销规则：组织结构由总公司代理商专卖店构成。总公司全权负责销售业务，并决定给代理商的份额；代理商再给货到专卖店，整个组织机构呈现树状结构；上级机构对下级机构拥有控制权，主要控制其销售的服…
阅读更多...
Entity Framework EF Migration 迁移

Entity Framework EF Migration 迁移

针对Code First来说关注的只有实体类。当需求变更时只需要添加新的实体类或者在实体类中添加、删除、修改属性即可。但是修改完成之后要如何将修改同步到数据库中？ migration 机制就出现了 ●启用Migrations 　　●通过Add-Migration添加Migration 　　●Update-D…
阅读更多...
WPF/C#：BusinessLayerValidation

WPF/C#：BusinessLayerValidation

BusinessLayerValidation介绍 BusinessLayerValidation，即业务层验证，是指在软件应用程序的业务逻辑层（Business Layer）中执行的验证过程。业务逻辑层是应用程序架构中的一个关键部分，负责处理与业务规则和逻辑相关的…
阅读更多...
初中英语优秀作文分析-006How to Deal with the Exam Stress-如何应对考试压力

初中英语优秀作文分析-006How to Deal with the Exam Stress-如何应对考试压力

更多资源请关注纽扣编程微信公众号 记忆树 1 We students are very busy with schoolwork and in the face of many exams every school day. 翻译 我们学生忙于功课，每个上学日都面临许多考试。 简化记忆 考试 句子结构 We students 主语 我们学生&#xf…
阅读更多...
手把手教你入门vue+springboot开发（六）--后端代码解读与优化

手把手教你入门vue+springboot开发（六）--后端代码解读与优化

文章目录 前言一、Lombok库二、spring-boot-starter-validation库三、ThreadLocalUtil四、全局异常处理总结 前言 前面我们已经把vuespringboot前后端分离开发和打包部署过程全部打通了，通过一个简单的demo来演示整个过程，主要关注在开发工具使用、框架…
阅读更多...
CAD使用技巧,图片去边框,直线等分

CAD使用技巧,图片去边框,直线等分

CAD插入图片之后怎么去除图片边框 有时候我们需要将图片插入到CAD里面，但是发现插入进去之后，图片周围带有白色边框，这样看着就不是很舒服，要去除边框要如何操作呢 命令操作法：在命令栏输入“imageframe”回车&#xf…
阅读更多...
瑞幸咖啡小程序逆向

瑞幸咖啡小程序逆向

阅读更多...
蜜雪冰城小程序逆向

蜜雪冰城小程序逆向

app和小程序算法一样 小程序是wasm
阅读更多...
谈谈Flink消费kafka的偏移量

谈谈Flink消费kafka的偏移量

offset配置: flinkKafkaConsumer.setStartFromEarliest():从topic的最早offset位置开始处理数据，如果kafka中保存有消费者组的消费位置将被忽略。 flinkKafkaConsumer.setStartFromLatest():从topic的最新offset位置开始处理数据，如果kafka中保存有消费…
阅读更多...
Golang | Leetcode Golang题解之第200题岛屿数量

Golang | Leetcode Golang题解之第200题岛屿数量

题目&#xff1a; 题解&#xff1a; func numIslands(grid [][]byte) int {res : 0for i : 0; i < len(grid); i {for j : 0; j < len(grid[i]); j {if grid[i][j] 1 {resdfs(grid, i, j)}}}return res }func dfs(grid [][]byte, r, c int) {h, w : len(grid), len(gri…
阅读更多...
C++感受12-Hello Object 派生版

C++感受12-Hello Object 派生版

不变的功能&#xff0c;希望直接复用原有代码&#xff1b;变化的功能&#xff0c;希望在分开的代码里实现。 派生的基本概念和目的如何定义派生类以及创建派生对象派生对象的生死过程 0. 课堂视频 ff14-HelloObject-派生版 1. 派生的基本概念与目的 编程&#xff0c;或者说软…
阅读更多...
Games101学习笔记 Lecture 14: Ray Tracing 2 (Acceleration Radiometry)

Games101学习笔记 Lecture 14: Ray Tracing 2 (Acceleration Radiometry)

Lecture 14: Ray Tracing 2 (Acceleration & Radiometry 一、加速光线追踪 AABB1.均匀网格 Uniform Spatial Partitions (Grids)①前处理-构建加速网格②射线与场景相交③网格分辨率④适用情况 2.空间划分KD-Tree①预处理②数据结构③遍历④问题 3.对象划分 & 包围盒层…
阅读更多...
使用Python绘制极坐标图

使用Python绘制极坐标图

使用Python绘制极坐标图 极坐标图极坐标图的优点使用场景 效果代码 极坐标图 极坐标图&#xff08;Polar Chart&#xff09;是一种图表类型&#xff0c;用于显示在极坐标系中的数据。极坐标图使用圆形坐标系&#xff0c;角度表示一个变量的值&#xff0c;半径表示另一个变量的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023