Size of tick does not change when checkbox size increases ANTD

Question

I am using checkboxes from ANT Design and this is the default size of checkbox.

Now, I want to increase the size of checkbox, so I changed the width and height and now my checkbox looks like this:

How can I change the size of tick? This is my CSS:

.ant-checkbox-checked .ant-checkbox-inner{ background-color: #008000; width: 30px; height: 30px; }

Samuel-Zacharie Faure · Accepted Answer · 2021-03-19 10:41:13Z

5

For future readers, a simpler way is to use the scale css transformation.

Just use this:

 .ant-checkbox-inner, .ant-checkbox-input { transform: scale(2) }

The whole box will be scaled twice bigger, including the tick. Note that you can also use it for values between 0 and 1 to reduce the size of the box.

answered Mar 19, 2021 at 10:41

Samuel-Zacharie Faure

1,15214 silver badges30 bronze badges

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

3 Comments

Anoiny Over a year ago

Why does this answer have negative points? This is much better than setting width and height and guessing their correct ratio (getting it wrong changes the tick shape).

Anoiny Over a year ago

Seriously, when somebody gives a negative point, they should at least comment why or make sure the explanation is in the comments already.

Paradoxdotexe Over a year ago

Transform is unreliable in this situation because it will grow the checkbox while not growing its bounding box in the DOM. This means it will become bigger, without shifting the other elements around it, or staying in the position that would be expected. Transform is a purely visual change, rather than a layout change.

Fatemeh Qasemkhani · Accepted Answer · 2020-06-30 05:38:03Z

3

Add this css to your styles:

.ant-checkbox-inner::after { width: 13.714286px; height: 23.142857px; }

answered Jun 30, 2020 at 5:38

Fatemeh Qasemkhani

2,0522 gold badges19 silver badges27 bronze badges

2 Comments

jason1234 Over a year ago

also, are you able to help me out with this? stackoverflow.com/questions/62633496/…

Fatemeh Qasemkhani Over a year ago

It was just a hint to find the correct selector, change it based on your design.

Sami · Accepted Answer · 2021-11-23 23:33:13Z

try this

 input[type=checkbox] { /* Double-sized Checkboxes */ -ms-transform: scale(2); /* IE */ -moz-transform: scale(2); /* FF */ -webkit-transform: scale(2); /* Safari and Chrome */ -o-transform: scale(2); /* Opera */ transform: scale(2); padding: 10px; } /* Might want to wrap a span around your checkbox text */ .checkboxtext { /* Checkbox text */ font-size: 110%; display: inline; }

Paradoxdotexe · Accepted Answer · 2023-10-30 20:15:07Z

To accurately scale the checkmark with the checkbox, you will first have to rework how AntD positions it. You can do this by changing the checkbox (.ant-checkbox-inner) to a flex layout and then changing the checkmark (.ant-checkbox-inner::after) to be relatively positioned.

After doing this, you should be able to get accurate scaling as long as the scale transform property aligns with the scale factor you are applying. For example, a 32px checkbox would be 2 times the original size of 16px, so we use scale(2). In mathematical terms, scaleFactor = checkboxSize / 16.

.ant-checkbox-inner { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; } .ant-checkbox-inner::after { transform: scale(2) rotate(45deg); position: relative; top: -6%; inset-inline-start: 0; }

Collectives™ on Stack Overflow

Size of tick does not change when checkbox size increases ANTD

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Linked

Related