如何放大Bootstrap自定义复选框尺寸？

你遇到的问题其实是Bootstrap自定义表单组件的一个常见坑——你修改的<input>元素根本不是页面上显示的那个复选框！

Bootstrap的自定义复选框是通过CSS伪元素模拟出来的：原来的<input type="checkbox">被设置为不可见（通常是opacity: 0或者绝对定位移出可视区域），页面上看到的复选框其实是<label>元素的::before（未选中的框）和::after（选中后的对勾）伪元素。所以直接修改#customCheck的宽高，自然不会有任何视觉变化。

正确的解决方案 #

你需要针对这两个伪元素和label本身来调整样式，以下是具体的CSS代码示例，你可以根据需求调整数值：

/* 1. 调整label的字体大小，让文字和放大后的复选框协调 */
.custom-checkbox .custom-control-label {
    font-size: 1.4rem;
}

/* 2. 修改复选框框体的尺寸（未选中状态） */
.custom-checkbox .custom-control-label::before {
    width: 1.8rem;
    height: 1.8rem;
    /* 保持Bootstrap默认的圆角，可根据需要修改 */
    border-radius: 0.25rem;
}

/* 3. 调整选中后的对勾尺寸和位置 */
.custom-checkbox .custom-control-label::after {
    width: 1.8rem;
    height: 1.8rem;
    /* 调整对勾的大小，百分比数值越小，对勾相对框体越小 */
    background-size: 65% 65%;
    /* 确保对勾在框体中居中 */
    top: 0;
    left: 0;
}

注意事项 #

• 如果需要更大的尺寸，比如2.5rem，只需要同步修改width、height的数值，同时调整background-size的百分比（比如50%），让对勾看起来比例协调。
• 确保你的自定义CSS加载在Bootstrap CSS之后，或者使用更具体的选择器（比如#customCheck + .custom-control-label::before）来覆盖Bootstrap的默认样式，避免优先级不够导致样式不生效。

内容的提问来源于stack exchange，提问作者user7884989