嘿，我来帮你搞定这个复选框样式的问题！原生的<input type="checkbox">确实在样式定制上有不少限制——不同浏览器的默认样式锁得比较死，直接改宽高和背景色经常不生效，但咱们有两种靠谱的方案来实现需求：

方案一：用伪元素模拟复选框（兼容性最优） #

这种方法是把原生复选框隐藏，用相邻元素+伪元素做视觉上的复选框，样式完全可控，所有现代浏览器都支持。

HTML 结构 #

<!-- 把复选框嵌套在label里，点击自定义框就能触发选中状态 -->
<label class="custom-checkbox">
  <input type="checkbox" name="chkbox">
  <span class="checkbox-visual"></span>
</label>

CSS 样式 #

/* 隐藏原生复选框，但保留交互功能 */
.custom-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* 自定义复选框基础样式：设置宽高、背景色等 */
.checkbox-visual {
  display: inline-block;
  width: 28px; /* 自定义宽度 */
  height: 28px; /* 自定义高度 */
  background-color: #f0f0f0; /* 默认背景色 */
  border: 1px solid #ddd;
  border-radius: 4px; /* 可选：给复选框加圆角 */
  cursor: pointer;
  transition: background-color 0.2s ease; /* 可选：选中时的过渡动画 */
}

/* 复选框被选中时的样式 */
.custom-checkbox input[type="checkbox"]:checked + .checkbox-visual {
  background-color: #4CAF50; /* 选中后的背景色 */
  position: relative;
}

/* 可选：给选中状态添加对勾标记 */
.custom-checkbox input[type="checkbox"]:checked + .checkbox-visual::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 6px;
  width: 7px;
  height: 14px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

方案二：直接修改原生复选框（简洁但兼容性有限） #

如果你的目标浏览器都是现代版本，可以尝试直接用CSS修改原生复选框，通过appearance: none去掉默认样式，再自定义属性：

input[type="checkbox"] {
  /* 去掉浏览器默认样式 */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  
  /* 自定义宽高 */
  width: 28px;
  height: 28px;
  
  /* 自定义背景色 */
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

/* 选中状态的样式 */
input[type="checkbox"]:checked {
  background-color: #4CAF50;
  position: relative;
}

/* 可选：添加对勾 */
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 6px;
  width: 7px;
  height: 14px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

小提示 #

• 方案一的兼容性更好，哪怕是旧版浏览器也能正常显示；方案二更简洁，但要注意appearance属性在一些老浏览器（比如IE）里不支持。
• 记得确保复选框和标签关联好：要么像方案一那样把复选框嵌套在<label>里，要么给复选框加id，给<label>加for="对应id"，这样点击标签也能触发复选框状态变化。

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