html checkbox 样式

你可以通过 CSS 来修改 checkbox 的样式。以下是一些常用的样式：

1. 隐藏默认 checkbox 样式

input[type="checkbox"] {
  display: none;
}

2. 自定义 checkbox 样式

.checkbox {
  display: inline-block;
  position: relative;
  padding-left: 25px;
  margin-right: 10px;
  cursor: pointer;
  font-size: 18px;
}

.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

.checkbox:hover input ~ .checkmark {
  background-color: #ccc;
}

.checkbox input:checked ~ .checkmark {
  background-color: #2196F3;
}

.checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox input:checked ~ .checkmark:after {
  display: block;
}

.checkbox .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

这个样式会在 checkbox 左侧显示一个方形的标记，当 checkbox 被选中时，标记会变成蓝色的。

你可以根据自己的需求来修改这个样式，并应用于你的 HTML checkbox 元素。