如何使用CSS移除复选框的边框与背景色？

要移除复选框的边框和背景颜色，需先清除浏览器自带的默认样式，再设置自定义样式，具体实现如下：

CSS 代码 #

label input[id="cb1"] {
  width: 14px;
  height: 14px;
  /* 清除浏览器默认外观，核心步骤 */
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  /* 移除背景颜色 */
  background-color: transparent;
}

/* 可选：自定义选中状态的勾选标记 */
label input[id="cb1"]:checked:after {
  content: "✓";
  display: block;
  text-align: center;
  line-height: 14px;
}

HTML 代码 #

<label for="cb1"><input type="checkbox" id="cb1"></label>

关键说明 #

• appearance: none 及 -webkit-appearance: none 用于清除浏览器自带的复选框默认样式，只有这样，后续的边框、背景色设置才能生效。
• border: none 直接移除复选框边框，background-color: transparent 确保背景完全透明。
• 选中状态的伪元素样式可根据需求调整或删除，若不需要自定义勾选标记，仅保留前半部分CSS即可。

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