react antdesign 多选按钮方框改为圆形

280 阅读1分钟

由于radio 选中不能取消。且只有一个radio按钮。所以选择用 checkbox。 所以选中后。将checkbox的方形。修改形状为圆形

<div className="App">
   <Checkbox onChange={setRadioValueFn} className="is_bus_class">AAAA</Checkbox>
   </div>
//css为

.App {
    position: relative;
}
//定位位置
.is_bus_class {
    display: inline-block;
    margin-left: 10px;
    position: absolute;
    top:-31px;
}

// 内部为圆形
.is_bus_class .ant-checkbox-inner {
    border-radius: 50%;
    display: inline-block;
  }
  // 选中之前边框去除 
  .is_bus_class .ant-checkbox-checked::before {
    border: none;
  }
    // 选中之前边框去除 在此可设置被选中状态的 颜色等
  .is_bus_class .ant-checkbox-checked::after {

    border: none;
  }