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.

score 27 · Accepted Answer · edited Feb 06 '23 at 04:36

27

You can use simple css

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

edited Feb 06 '23 at 04:36

Pang

9,564
146
81
122

answered Apr 12 '19 at 07:36

humanbean

542
4
11

2

I want to apply the css dynamically(different colors for a range of check boxes based on some given input). – Henok Tesfaye Apr 12 '19 at 07:38
2

Here is a codeSandBox [link](https://codesandbox.io/embed/n59zxxxyol) I did using styled-components. Let me know if it worked. – humanbean Apr 12 '19 at 07:52
any idea how to implement this on table's selection checkbox ? – Hilal Arsa May 22 '20 at 04:12
@HilalArsa Can you share an example? – humanbean May 25 '20 at 21:27
Its been a while, but do you by any chance know how to reset a color of a checkbox when it is hovered? I have changed the color of a checked item successfully, but it is still blue when hovered – Listopad02 Jun 23 '23 at 15:08

score 3 · Answer 2 · answered Jan 21 '20 at 03:05

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.

score 3 · Answer 3 · answered Oct 07 '20 at 19:33

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' />

score 2 · Answer 4 · answered Oct 23 '20 at 03:07

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"));

Keshav Gera · Answer 5 · 2020-11-20T07:36:01.427

    .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;
  }
}

score 1 · Answer 6 · answered Nov 25 '20 at 13:08

1

Just override the @checkbox-color Less variable.

answered Nov 25 '20 at 13:08

Tárcio Zemel

821
10
28

score 1 · Answer 7 · answered Mar 02 '21 at 08:59

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;
  }

score 0 · Answer 8 · answered Jun 06 '21 at 19:19

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";
}

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

8 Answers8