不同浏览器中Checkbox尺寸不一致问题求助（附代码）

我通过Angular动态生成Checkbox与Label，已为Checkbox设置width:13px、height:16.5px的统一样式，但在部分浏览器中仍出现尺寸不一致的情况。

相关代码 #

HTML代码 #

<div class="registrationFormOuter">     
  <form role="form" [formGroup]="form">
    <div class="row">
      <div class="col-md-6" *ngFor="let data of Field">
        <label class="blacklabel" [ngClass]="isCheckedTheme?'color-white':'color-black'">
          <input type="checkbox" style="width: 13px; height: 16.5px;" [value]="data">
          {{data.ques}}
        </label>
      </div>
    </div>
  </form>
</div>

CSS代码 #

.registrationFormOuter{ 
  padding: 15px 15px 0; 
  min-height: 330px; 

  label{
    &.blacklabel{
      display:flex;
      justify-content: flex-start;
      align-items: flex-start;
      margin-bottom:10px;
      font-family: Google Sans,Roboto,Arial,sans-serif !important;
      font-size: 0.875rem !important;
      font-weight: 400 !important;
      letter-spacing: .0178571429em !important;
      text-transform: none  !important;

      input{
        margin-right:5px;
        margin-top:3px;
      }
    }
  }
}

问题说明 #

不同浏览器中的Checkbox大小存在明显差异，部分浏览器的Checkbox尺寸偏大，未遵循自定义的宽高设置。

解决方案 #

浏览器原生Checkbox的样式兼容性极差，不同厂商的默认样式规则会覆盖自定义尺寸，可通过以下方式解决：

1. 重置浏览器默认样式 #

给Checkbox添加重置规则，清除浏览器自带的外观、内边距等属性，确保自定义样式生效：

input[type="checkbox"] {
  width: 13px;
  height: 16.5px;
  /* 清除默认外观 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  border: none;
  background: transparent;
  /* 保证垂直对齐一致 */
  vertical-align: middle;
}

2. 完全自定义Checkbox外观 #

如果重置后仍有兼容性问题，直接用伪元素模拟Checkbox的选中/未选中状态，彻底摆脱浏览器默认样式限制：

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 13px;
  height: 16.5px;
  border: 1px solid #ccc;
  border-radius: 2px;
  position: relative;
  cursor: pointer;
  margin-right: 5px;
  margin-top: 3px;
}

/* 选中状态样式 */
input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  color: #000;
}

/* 适配深色主题 */
.isCheckedTheme input[type="checkbox"] {
  border-color: #fff;
}
.isCheckedTheme input[type="checkbox"]:checked::after {
  color: #fff;
}

3. 优化HTML结构 #

将Checkbox与Label分开嵌套，避免标签嵌套带来的样式继承冲突，同时提升可访问性：

<div class="registrationFormOuter">     
  <form role="form" [formGroup]="form">
    <div class="row">
      <div class="col-md-6" *ngFor="let data of Field">
        <div class="checkbox-group" [ngClass]="isCheckedTheme?'color-white':'color-black'">
          <input type="checkbox" class="custom-checkbox" [value]="data" id="checkbox-{{data.id}}">
          <label class="blacklabel" for="checkbox-{{data.id}}">{{data.ques}}</label>
        </div>
      </div>
    </div>
  </form>
</div>

对应的CSS调整：

.registrationFormOuter{ 
  padding: 15px 15px 0; 
  min-height: 330px; 

  .checkbox-group {
    display:flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom:10px;
  }

  .blacklabel{
    font-family: Google Sans,Roboto,Arial,sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    letter-spacing: .0178571429em !important;
    text-transform: none  !important;
    cursor: pointer;
  }

  .custom-checkbox {
    margin-right:5px;
    margin-top:3px;
    /* 加上上面的重置或自定义样式 */
  }
}

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