前端input输入时边框颜色更改
weixin_46229676 2024-07-28 11:33:02 阅读 63
1. 当聚焦与input框需要输入的时候，需要特定的边框颜色
<code>input:focus {
outline: 1px solid var(--primary50); //设置边框颜色
border-radius: 4px;
}
2.翻页时的el-pagination的翻页按钮的颜色更改
<style lang="less"> #因为我所有页面的按钮都需要这个样式，我就没有加scopedcode>
.el-pagination.is-background .el-pager li.active {
background-color: var(--primary100);
color: #fff;
cursor: default;
}
.el-pagination.is-background .el-pager li:hover {
color: var(--white);
background-color: var(--primary100);
}
.el-pagination.is-background .el-pager li.is-active {
background-color: var(--primary100);
color: #fff;
}
</style>
3.el-menu背景样式更改（原始图，选择图，悬浮图）
<code><style lang="less"> #因为我是所有页面都需要，所以没有使用scopedcode>
.el-menu--horizontal > .el-menu-item.is-active {
border-bottom: 2px solid var(--primary100);
color: var(--primary100) !important;
}
.el-menu-item.is-active {
color: var(--primary100);
}
/* 覆盖默认的悬浮背景色和边框 */
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
background-color: var(--primary10); /* 修改悬浮时的背景色 */
color: var(--primary100);
}
</style>
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。