How to change the color of a check box in antd?

Question

import { Checkbox } from 'antd' 

<Checkbox style={{ color: 'red', backgroundColor: 'black' }}>Dr John</Checkbox>

How do I change the color of the check box, not the label 'Dr John'? The style above only changes the styles of the label, not the check box.

Answer 1

In latest version you use ConfigProvider to change the overall checkbox theme.

<ConfigProvider
  theme={{
    token: {
      colorPrimary: '00AE%B' // your color
    }
  }}
>
  <Checkbox>Checkbox</Checkbox>
</ConfigProvider>

But if you use older version(version < 5) you can do this by modifying couple of ant classes. Below code change the overall behavior like ConfigProvider.

.ant-checkbox:hover {
  border-color: #00AE5B;
}
.ant-checkbox-checked .ant-checkbox-inner {
  background-color: #00AE5B;
  border-color: #00AE5B;
}
.ant-checkbox-wrapper:hover {
  .ant-checkbox-inner {
    border-color: #00AE5B;
  }
  .ant-checkbox-checked::after {
    border: 1px solid #00AE5B;
  }
}

Answer 2

The answer by Talha Abbas almost worked for me, but it lacked "focus" and "disabled" states, so I improved it:

.ant-checkbox-wrapper {
  .ant-checkbox-checked .ant-checkbox-inner {
    background-color: mix($dark, #fff, 80%) !important;
    border-color: mix($dark, #fff, 80%);
  }

  .ant-checkbox-checked:after,
  .ant-checkbox .ant-checkbox-inner,
  .ant-checkbox-input:focus + .ant-checkbox-inner {
    border-color: mix($dark, #fff, 80%) !important;
  }
}

// * disabled
.ant-checkbox-wrapper-disabled {
  .ant-checkbox-checked.ant-checkbox-disabled .ant-checkbox-inner {
    background-color: mix($dark, #fff, 25%) !important;
    border-color: mix($dark, #fff, 25%);
  }

  .ant-checkbox-disabled.ant-checkbox-checked:after,
  .ant-checkbox-disabled .ant-checkbox-inner,
  .ant-checkbox-disabled .ant-checkbox-input:focus + .ant-checkbox-inner {
    border-color: mix($dark, #fff, 25%) !important;
  }
}

Answer 3

You can use config provider:

<ConfigProvider
  theme={{
    token: {
      colorPrimary: "#9A9A9A"
    }
  }}
>
  <Checkbox> check box </Checkbox>
</ConfigProvider>

Answer 4

Thanks @Talha, it works for me. One more line of code i wanna add is the the color of box when hovering on the label:

.ant-checkbox-checked .ant-checkbox-inner {
  background-color: #070707 !important;
  border-color: #070707 !important;
}
.ant-checkbox-wrapper:hover .ant-checkbox-checked .ant-checkbox-inner {
  background-color: #070707 !important;
  border-color: #070707 !important;
}
.ant-checkbox-checked:hover .ant-checkbox-checked .ant-checkbox-inner {
  background-color: #070707 !important;
  border-color: #070707 !important;
}
.ant-checkbox-checked:after {
  border-color: #070707 !important;
}
.ant-checkbox:hover::after {
  border-color: #070707 !important;
}
.ant-checkbox:hover .ant-checkbox-inner {
  border-color: #070707 !important;
}

// ****** I add this one ******
.ant-checkbox-wrapper:hover .ant-checkbox-inner {
  border-color: #070707 !important;
}

Answer 5

This simple solution is using the 'accent-color' property from the CSS Basic User Interface Module Level 4:

.ant-checkbox-input {
  accent-color: "green";
}

This solution also doesn't have the accessibility issues that many other solutions have.

This can also be used for RadioButtons.

Note that this might not be supported by older browser versions.

Also see https://stackoverflow.com/a/69164710/5882233.

Answer 6

I have tried all of the above solutions but these solutions do not work for me completely, sometimes a hover effect in blue color remains or the click effect in blue when we fill the checkbox remains so I changed all classes like this

.ant-checkbox-checked .ant-checkbox-inner {
    background-color: #99b82d !important;
    border-color: #99b82d;
}
.ant-checkbox-wrapper:hover .ant-checkbox-checked .ant-checkbox-inner {
    background-color: #99b82d !important;
    border-color: #99b82d !important;
}
.ant-checkbox-checked:hover .ant-checkbox-checked .ant-checkbox-inner {
    background-color: #99b82d !important;
    border-color: #99b82d !important;
}
.ant-checkbox-checked:after {
    border-color: #99b82d !important;
}
.ant-checkbox:hover::after {
    border-color: #99b82d !important;
}
.ant-checkbox:hover .ant-checkbox-inner {
    border-color: #99b82d !important;
}

!!! use it with your parent class or it will change all of the checkboxes in your app

if you want to change the color of the inner space of the empty checkbox, then you can use

.ant-checkbox-inner {
    background-color: #e3f0f5 !important;
}

Answer 7

You can use simple css

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

Answer 8

To dynamically change Checkbox using only CSS you can also add className to Checkbox and then access it in CSS like this:

<Checkbox className="my-checkbox">Your checkbox</Checkbox>

And then in CSS

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

Answer 9

if this doesn't work

.ant-checkbox-checked .ant-checkbox-inner {
    background-color: #3350ac;
    border-color: #3350ac;
  }

then it means it is being overridden but the native ant CSS so put ! important to you CSS so that it overr

.ant-checkbox-checked .ant-checkbox-inner {
    background-color: #3350ac !important;
    border-color: #3350ac !important;
  }

Answer 10

Just override the @checkbox-color Less variable.

Answer 11

    .checkbox { 
        .ant-checkbox .ant-checkbox-inner {
            border-color: red;                 // for mouse focus color
        }
      .ant-checkbox-checked .ant-checkbox-inner {
            background-color: green;         // selected color
            border-color: green;
        }
    }




.checkbox {     
  .ant-checkbox-checked .ant-checkbox-inner {
        background-color: green80;
        border-color: green80;
    }   
    .ant-checkbox-wrapper:hover .ant-checkbox-inner,
  .ant-checkbox:hover .ant-checkbox-inner,
  .ant-checkbox-input:focus+.ant-checkbox-inner {
    border-color: green80 !important;
  }

  .ant-checkbox-indeterminate .ant-checkbox-inner::after {
    background-color: green80;
  }
}

Answer 12

Override the default antd checkbox classes in your css and provide the necessary attributes to custom it.

For example,

index.css

.ant-checkbox .ant-checkbox-inner {
  width: 25px;
  height: 25px;
  background-color: red;
  border-color: red;
}

.ant-checkbox-disabled .ant-checkbox-inner {
  width: 25px;
  height: 25px;
  background-color: gray;
  border-color: gray;
}

.ant-checkbox-checked .ant-checkbox-inner {
  width: 25px;
  height: 25px;
  background-color: transparent;
  border-color: red;
}

index.js

import React from "react";
import ReactDOM from "react-dom";
import { Checkbox } from "antd";
import "antd/dist/antd.css";
import "./index.css";

class App extends React.Component {
  onChange(e) {
    console.log(`checked = ${e.target.checked}`);
  }
  
  render() {
    return (
      <div>
        <Checkbox onChange={this.onChange} disabled={true}>Checkbox</Checkbox>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

Answer 13

const CustomCheckbox = styled(Checkbox)`
  ${props =>
    props.backgroundColor &&
    css`
      & .ant-checkbox-checked .ant-checkbox-inner {
        background-color: ${props.backgroundColor};
        border-color: ${props.backgroundColor};
      }
    `}
`;

with styled-component package you can do something like this.

<CustomCheckbox backgroundColor='green' />

Answer 14

I was able to dynamically change the checkbox's color using @humanbean's and This answer.

Checkboxes.js

<Checkbox
    value={key}
    key={index}
    style={{
        "--background-color": boxColors[index],
        "--border-color": boxColors[index],
    }}>
    Title
</Checkbox>

CSS

.ant-checkbox-checked .ant-checkbox-inner {
    background-color: var(--background-color);
    border-color: var(--border-color);
}

Using var() function in css and providing the color in inline style of the component.