使用Ant Design中的多选框组件时修改其多选框样式

最新推荐文章于 2025-09-26 03:02:56 发布

原创最新推荐文章于 2025-09-26 03:02:56 发布 · 1.5w 阅读

15 ·

CC 4.0 BY-SA版权

Ant Design 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Less自定义AntDesign中的多选框样式，包括修改多选框的默认样式、选中状态及鼠标悬停时的效果，并提到了当前无法修改多选框内部勾的样式的问题。

样式必须在全局样式中修改才能生效，位于global文件夹中的less文件或者index.less或global.less文件

具体优先级自行计算

当选中多选框或者label时，多选框的边框改变颜色：

.ant-checkbox-wrapper:hover .ant-checkbox-inner,
.ant-checkbox:hover .ant-checkbox-inner, 
.ant-checkbox-input:focus + .ant-checkbox-inner{
   border: 1px solid #1BBA79 !important;
}

修改选中时多选框样式：

.ant-checkbox-checked .ant-checkbox-inner,
.ant-checkbox-indeterminate .ant-checkbox-inner {
    background-color: transparent;
    border: 1px solid #1BBA79;
  }

修改多选框默认样式：

  .ant-checkbox{
    .ant-checkbox-inner{
      border: 1px solid #1BBA79;
      background-color: transparent;
    }
  }

目前还有一个问题，多选框中的勾的样式还没有办法修改，还在研究中.....

网页效果：