如何实现兼容IE9+主流浏览器的大尺寸复选框？

嘿，我刚好之前帮团队搞定过兼容IE9及以上主流浏览器的大尺寸复选框需求，给你分享几个实测有效的方案，亲测在IE9、Chrome、Firefox这些浏览器里都能稳定工作：

方案一：CSS伪元素模拟（最推荐） #

这个方案完全用纯CSS实现，不需要额外资源，而且兼容性拉满。核心思路是隐藏原生复选框，用关联的<label>标签的伪元素来绘制自定义样式的复选框。

实现步骤： #

• 把原生复选框移出可视区域（别用display: none，IE9下会导致label关联失效），比如用position: absolute; opacity: 0;
• 给label设置固定宽高，作为大复选框的容器
• 用:before伪元素绘制未选中状态的边框样式
• 用:checked + label:after伪元素绘制选中状态的对勾（或者自定义图标）

代码示例：

/* 隐藏原生复选框 */
.custom-checkbox input {
  position: absolute;
  opacity: 0;
}

/* 自定义复选框容器 */
.custom-checkbox label {
  display: inline-block;
  width: 24px; /* 自定义大小 */
  height: 24px;
  border: 2px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  margin-right: 8px;
}

/* 未选中状态的hover效果 */
.custom-checkbox input:hover + label {
  border-color: #666;
}

/* 选中状态的边框样式 */
.custom-checkbox input:checked + label {
  border-color: #2196F3;
  background-color: #2196F3;
}

/* 选中状态的对勾 */
.custom-checkbox input:checked + label:after {
  content: '';
  position: absolute;
  left: 8px;
  top: 4px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  /* IE9支持transform，这里没问题 */
}

HTML结构：

<div class="custom-checkbox">
  <input type="checkbox" id="cb1">
  <label for="cb1"></label>
  <span>选项文本</span>
</div>

注意：IE9支持:checked伪类和伪元素，所以这个方案完全兼容。

方案二：背景图片替换 #

如果需要更复杂的自定义样式（比如渐变、特殊图标），可以用背景图片来实现：

.custom-checkbox input {
  position: absolute;
  opacity: 0;
}

.custom-checkbox label {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url('unchecked.png');
  background-size: cover;
  cursor: pointer;
}

.custom-checkbox input:checked + label {
  background-image: url('checked.png');
}

这个方案要注意图片路径，IE9支持background-size: cover，所以也能正常显示。

为什么transform scale效果差？ #

你提到的transform: scale()方案在IE9里确实有问题：一是IE9对2D transform的支持虽然有，但缩放后元素边缘会严重模糊；二是缩放只是视觉上放大，元素的实际点击区域还是原来的大小，容易出现点击不灵敏的情况，体验很差，所以不推荐。

以上两个方案都是我实际项目中用过的，完全兼容IE9及以上主流浏览器，你可以根据自己的需求选择~

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