Angular 16: How do I change the size of an Angular Material checkbox (MDC)?
P粉254077747
2023-08-18 11:42:41
<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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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.