checkbox 显示成按钮样式

可以使用 CSS 来将 checkbox 显示成按钮样式。以下是一个例子：

<label class="checkbox-button">
  <input type="checkbox">
  Checkbox
</label>

.checkbox-button {
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 5px 10px;
  cursor: pointer;
}

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

.checkbox-button input[type="checkbox"]:checked + span {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.checkbox-button span {
  margin-left: 5px;
}

这个例子中，我们将 checkbox 隐藏了，使用 `label` 标签来包裹它并且添加了一个类 `checkbox-button`。在 CSS 中，我们为这个类添加了一些样式，包括边框、圆角、填充和光标样式。我们还定义了选中状态下的背景颜色和边框颜色。最后，我们使用 `span` 元素来显示 checkbox 的标签文本。当 checkbox 被选中时，`span` 元素的样式会被修改。