0


前端input输入时边框颜色更改

  1. 当聚焦与input框需要输入的时候,需要特定的边框颜色
  1. input:focus {
  2. outline: 1px solid var(--primary50); //设置边框颜色
  3. border-radius: 4px;
  4. }

2.翻页时的el-pagination的翻页按钮的颜色更改

  1. <style lang="less"> #因为我所有页面的按钮都需要这个样式,我就没有加scoped
  2. .el-pagination.is-background .el-pager li.active {
  3. background-color: var(--primary100);
  4. color: #fff;
  5. cursor: default;
  6. }
  7. .el-pagination.is-background .el-pager li:hover {
  8. color: var(--white);
  9. background-color: var(--primary100);
  10. }
  11. .el-pagination.is-background .el-pager li.is-active {
  12. background-color: var(--primary100);
  13. color: #fff;
  14. }
  15. </style>

3.el-menu背景样式更改(原始图,选择图,悬浮图)

  1. <style lang="less"> #因为我是所有页面都需要,所以没有使用scoped
  2. .el-menu--horizontal > .el-menu-item.is-active {
  3. border-bottom: 2px solid var(--primary100);
  4. color: var(--primary100) !important;
  5. }
  6. .el-menu-item.is-active {
  7. color: var(--primary100);
  8. }
  9. /* 覆盖默认的悬浮背景色和边框 */
  10. .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
  11. .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  12. background-color: var(--primary10); /* 修改悬浮时的背景色 */
  13. color: var(--primary100);
  14. }
  15. </style>

本文转载自: https://blog.csdn.net/weixin_46229676/article/details/138181996
版权归原作者 weixin_46229676 所有, 如有侵权,请联系我们删除。

“前端input输入时边框颜色更改”的评论:

还没有评论