Change color of tick in ANTD Checkbox

Question

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

Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. See How to create a Minimal, Reproducible Example — Paulie_D
– Paulie_D, Commented Jun 29, 2020 at 9:01
w3schools.com/howto/howto_css_custom_checkbox.asp Try this, it has all that you want and more styling which you can use. Pretty good for a start. — Gosi
– Gosi, Commented Jun 29, 2020 at 9:03
@Paulie_D didn't I already produce the code? When you are using ANTD you just need to call <Checkbox/> and it will return my checkbox with my CSS — jason1234
– jason1234, Commented Jun 29, 2020 at 9:07
No you didn't. You gave a snippet of CSS that does not demonstrate the issue, We don't all have ANTD available, your demo should be runnable in the question. — Paulie_D
– Paulie_D, Commented Jun 29, 2020 at 9:09
@Paulie_D this is possibly only a styling issues and you do not need to mention explicitly how to return a checkbox (e.g. <input type="checkbox"/>) — jason1234
– jason1234, Commented Jun 29, 2020 at 9:29

Fatemeh Qasemkhani · Accepted Answer · 2020-07-01 06:52:10Z

4

Add this css to your styles:

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

edited Jul 1, 2020 at 6:52

answered Jun 30, 2020 at 11:47

Fatemeh Qasemkhani

2,0522 gold badges19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

jason1234 Over a year ago

it is not working. I will now have a rectangle instead of a tick. I will edit my post to show you how it looks like now.

jason1234 Over a year ago

i am using V4.4.0 though

jason1234 Over a year ago

is there any documentations or website that i can read up more on? cause it does not seems to work for me

jason1234 Over a year ago

sorry, it is still not working. I even created a codesandbox code to test it out: codesandbox.io/s/hello-antd-77jxp

jason1234 Over a year ago

hey I was wondering, since adding a border will make the tick look square, then how could I change the thickness of it? stackoverflow.com/questions/62674344/…

Aeoliax · Accepted Answer · 2023-10-24 07:14:01Z

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.

Collectives™ on Stack Overflow

Change color of tick in ANTD Checkbox

2 Answers 2

5 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Linked

Related