input type=checkbox变为五角星

你可以使用 CSS 中的伪元素 ::before 和 ::after 来实现将 checkbox 变为五角星的效果。下面是一个示例代码：

HTML：

<label for="checkbox">
  <input type="checkbox" id="checkbox">
  <span class="star"></span>
</label>

CSS：

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

.star {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #ccc;
  position: relative;
  margin-right: 5px;
}

.star::before,
.star::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 20px 10px;
  border-color: transparent transparent #fff transparent;
  position: absolute;
  top: -10px;
  left: -10px;
}

.star::after {
  transform: rotate(36deg);
}

input[type="checkbox"]:checked + .star {
  background-color: gold;
}

input[type="checkbox"]:checked + .star::before,
input[type="checkbox"]:checked + .star::after {
  border-color: transparent transparent gold transparent;
}

这段代码使用了一个隐藏的 checkbox，当 checkbox 被选中时，通过选择器 `:checked` 来改变五角星的样式。具体实现方式是使用两个伪元素来画出五角星的形状，并使用 `transform` 属性来旋转其中一个伪元素。