html多选框 美化,使用CSS美化radio和checkbox

当然可以使用 CSS 美化多选框（checkbox）和单选框（radio）。以下是一个简单的示例：

HTML 代码：

<label class="checkbox">
  <input type="checkbox">
  <span class="checkmark"></span>
  Checkbox 1
</label>

<label class="radio">
  <input type="radio" name="radio">
  <span class="checkmark"></span>
  Radio 1
</label>

<label class="radio">
  <input type="radio" name="radio">
  <span class="checkmark"></span>
  Radio 2
</label>

CSS 代码：

/* 隐藏默认的 checkbox 和 radio */
input[type="checkbox"],
input[type="radio"] {
  display: none;
}

/* 定义 checkbox 和 radio 的样式 */
.checkmark {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #999;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
}

/* 定义被选中的 checkbox 和 radio 的样式 */
.checkmark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: #999;
  border-radius: 50%;
  display: none;
}

input[type="checkbox"]:checked + .checkmark::after {
  display: block;
}

input[type="radio"]:checked + .checkmark::after {
  display: block;
}

/* 定义 label 的样式 */
label {
  display: block;
  margin-bottom: 10px;
}

/* 定义 checkbox 和 radio 的父元素的样式 */
.checkbox,
.radio {
  display: inline-block;
  vertical-align: top;
  margin-right: 20px;
}

/* 定义 checkbox 和 radio 的文本样式 */
.checkbox span,
.radio span {
  margin-left: 10px;
  font-size: 14px;
}

你可以根据需要调整样式，达到想要的美化效果。