Size of tick does not change when checkbox size increases ANTD

user_12681897 0
Viewed 3255

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

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

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;

}
antd css
3 Answers

Add this css to your styles:

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

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.

user_53729510

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