antd vue 调整checkbox默认样式

最新推荐文章于 2024-05-22 11:03:26 发布

YaaLee_

最新推荐文章于 2024-05-22 11:03:26 发布

阅读量3k

点赞数 3

分类专栏： Vue # Ant Design 文章标签： vue.js css html

本文链接：https://blog.youkuaiyun.com/yrqlyq/article/details/121929342

版权

Ant Design CSS hover 复选框样式背景颜色边框样式

关键词由优快云通过智能技术生成

Vue 同时被 2 个专栏收录

62 篇文章

订阅专栏

Ant Design

16 篇文章

订阅专栏

本文详细介绍了如何在Ant Design中调整鼠标悬停时的复选框样式，包括hover状态、默认选中和未选中状态的颜色设置，以及CSS选择器的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 鼠标hover时候的颜色
.ant-checkbox-wrapper:hover .ant-checkbox-inner,
.ant-checkbox:hover .ant-checkbox-inner, 
.ant-checkbox-input:focus + .ant-checkbox-inner{
   border: 2px solid #1BBA79 !important;
}
// 设置默认的颜色
.ant-checkbox{
  .ant-checkbox-inner{
    border: 2px solid #1BBA79;
    background-color: transparent;
  }
} 
// 设置选中的颜色
.ant-checkbox-checked .ant-checkbox-inner,
.ant-checkbox-indeterminate .ant-checkbox-inner {
    background-color: #1BBA79;
    border: 2px solid #1BBA79;
}