CODEWITHSUNDEEP
cssantd
jason1234
jason1234

Reputation: 213

Change color of tick in ANTD Checkbox

How can I change the color of thing tick inside a checkbox? This is what I have done:

.ant-checkbox-checked .ant-checkbox-inner {
  color: #000000;
  background-color: #008000;
}

.ant-checkbox-checked .ant-checkbox-input {
  color: #000000;
  background-color: #000000;
}

Upvotes: 1

Views: 4682

Answers (2)

Aeoliax
Aeoliax

Reputation: 91

Well, if someone still want to know the answer in 2023. For antd v5, you would add prefixCls prop in the Checkbox component like this

<Checkbox
  prefixCls="show-error"
  ...other props>
  {`ShowError`}
</Checkbox>

Then in your CSS file, you would add

.show-error-wrapper-checked > .show-error > .show-error-inner {
  background-color: #ff4d4f !important;
  border-color: #ff4d4f !important;
}

.show-error-wrapper > .show-error:hover > .show-error-inner {
  border-color: #ff4d4f !important;
}

Importantly, don't forget to add !important in your code, and that won't be any caveats of adding it here, since the class name is unique.

Upvotes: 0

Fatemeh Qasemkhani
Fatemeh Qasemkhani

Reputation: 2042

Add this css to your styles:

.ant-checkbox-checked .ant-checkbox-inner:after {
  border-color: red !important;
}

Upvotes: 4

Related Questions