如何为未选中的antd复选框添加边框颜色

Question

I need to add a border color and make the border thicker for antd checkbox.

<Checkbox>Add</Checkbox>

css:

.ant-checkbox-checked .ant-checkbox-inner {
    background-color: red;
    border-color: red;
}

The above code helped me changed the checkbox when only 'checked'

I also tried,

outline : 2px solid red;

How can I change the width and color of the border for a antd checkbox?

Answer 1

To change the checkbox when not checked all you have to do is use:

      .ant-checkbox-inner {
        width: 24px;
        height: 24px;
        border-width: 3px;
        border-radius: 5px;
        border-color: red;
      }

But to style it while it's checked :

      .ant-checkbox-checked .ant-checkbox-inner {
        background-color: blue;
        border-color: blue;
        width: 24px;
        height: 24px;
        font-size: 24px;
      }