Angular 16: How do I change the size of an Angular Material checkbox (MDC)?
P粉254077747
P粉254077747 2023-08-18 11:42:41
0
1
438
<p>In Material, which is now considered legacy, I can set the size of the checkbox as follows: </p> <pre class="brush:php;toolbar:false;">.mat-checkbox-frame { width: 1.5rem; }</pre> <p>How can I achieve the same effect in MDC? </p>
P粉254077747
P粉254077747

reply all(1)
P粉092778585

To change the size of the checkbox, add the following CSS code in styles.scss:

.mdc-checkbox__background {
  width: 1.5rem !important;
  height: 1.5rem !important;
}

However, if you want to use the default ripple effect, this is only half the solution. Now you also need to align the checkbox so that it fits perfectly within the circle of the ripple effect. Please add the following CSS code in styles.scss:

.mdc-checkbox__background {
  width: 1.5rem !important;
  height: 1.5rem !important;
  top: 50% !important; /* 添加 */
  left: 50% !important; /* 添加 */
  transform: translate(-50%, -50%) !important; /* 添加 */
}

Please refer to Real-time Demonstration.

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template