vue+elementui 主题配色修改-打造个性化配色系统

上一期中利用global.css来覆盖elementui原有的配色,修改了按钮和消息框。这一期继续尝试修改其他的控件。

1 修改info 类型按钮

上次修改了primary按钮,这次修改一下info按钮,在global.css中添加

css 复制代码
.el-button--info {
    background-color: #d9dee4 !important; /*  */
    border-color: #000000 !important; /* 黑色边框 */
    color: #00bca5 !important; /*  */
}

.el-button--info:hover, .el-button--info:focus {
    background-color: #333333 !important; /*  */
    border-color: #333333 !important; /* 深黑色边框 */
    color: #00bca5 !important; /*  */
}

修改完之后效果(绿色文字的按钮):

2 修改text类型按钮

再修改text类型的按钮,这个按钮在增删改查的界面里用到了:

css 复制代码
/* 覆盖 text类型按钮的文字颜色 */
.el-button--text {
    color: rgba(170, 129, 9, 0.88) !important; /* 金色文字 */
}

效果:

3 修改 el-input 框焦点边框

这边修改el-input的焦点边框也为金色,而textarea的输入框样式是不一样的,需要单独设置:

css 复制代码
/* 覆盖 el-input 的焦点边框颜色 */
.el-input__inner:focus {
    border-color: rgba(170, 129, 9, 0.88) !important; /* 设置边框颜色为金色 */
    box-shadow: 0 0 2px 2px rgba(255, 215, 0, 0.2) !important; /* 设置金色阴影效果,可选 */
    outline: none; /* 去除默认的 outline */
}

/* 覆盖 el-input textarea 的焦点边框颜色 */
.el-textarea__inner:focus {
    border-color: rgba(170, 129, 9, 0.88) !important; /* 设置边框颜色为金色 */
    box-shadow: 0 0 2px 2px rgba(255, 215, 0, 0.2) !important;
    outline: none;
}


4 数字选择框

数字选择框的样式比较多,也是调试了一会才把样式给覆盖住

css 复制代码
/* 输入框在悬浮和聚焦状态下的边框颜色 */
.el-input-number :hover,
.el-input-number :focus,
.el-input-number.is-focus .el-input__inner {
    border-color: #FFD700 !important; /* 设置金色边框 */
    box-shadow: 0 0 2px 2px rgba(255, 215, 0, 0.2) !important; /* 可选的金色阴影效果 */
    outline: none; /* 移除默认的 outline */
}

/* el-input-number 左右按钮的悬浮颜色 */
.el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled),
.el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled) {
    border-color: #FFD700 !important; /* 设置背景颜色为金色 */
}

/* el-input-number 图标颜色 */
.el-input-number__decrease:hover, .el-input-number__increase:hover {
    color: #FFD700 !important; /* 设置背景颜色为金色 */
}

5 select 框修改

在第3小节修改完之后select框是可以边框可以同时修改掉的,但是其中的选中颜色也需要单独设置,不然还是显示为蓝色:

css 复制代码
/* 覆盖 select 组件选中项的背景颜色和文字颜色 */
.el-select-dropdown__item.selected {
    background-color: #FFD700 !important; /* 设置背景颜色为金色 */
    color: #333333 !important; /* 设置文字颜色为深色,确保在金色背景上清晰可见 */
}

修改后:

6 分页控件

分页控件修改两个样式,一个是激活状态下的颜色,另一个是用鼠标去悬浮在数字上,显示的是另一个颜色:

css 复制代码
/* 覆盖 分页控件 的焦点边框颜色 */
.el-pager li.active{
    color: rgba(170, 129, 9, 0.88) !important; /* 金色文字 */
}

.el-pager li:hover {
    color: #00bca5 !important; /*  */
}

当前是表格位于第4页,鼠标悬浮在第5页上的效果:

相关推荐
daols886 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇6 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊6 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习7 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖7 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖7 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水8 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐8 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06278 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台8 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue