使用Ant Design中的多选框组件时修改其多选框样式
程序员文章站
2022-07-13 23:04:27
...
样式必须在全局样式中修改才能生效,位于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;
}
}
目前还有一个问题,多选框中的勾的样式还没有办法修改,还在研究中.....
网页效果: