html checkbox设置选项字体

在HTML中，如果你想设置checkbox选项的字体样式，通常情况下，由于`<input>`元素本身是不可见的，你不能直接修改它的样式。但是，你可以通过CSS来美化与之关联的`<label>`标签，使其看起来像是有文本描述的复选框。这里有一个简单的例子[^2]：

<input type="checkbox" id="option1" name="options" value="1">
<label for="option1">选项1</label> <!-- 使用 "for" 属性关联 label 到 input 元素 -->

/* CSS */
<style>
  /* 隐藏实际的 checkbox 和设置 label 的样式 */
  input[type="checkbox"] {
    display: none;
  }
  
  /* 使用 :checked 伪类为选中的复选框添加样式 */
  label::before {
    content: attr(data-label); /* 如果需要自定义文字 */
    font-family: Arial, sans-serif; /* 设置字体 */
    display: inline-block;
    padding: 0.2em 0.5em;
    margin-right: 0.5em;
    background-color: #ccc;
    color: black;
    border: 1px solid #aaa;
    cursor: pointer;
  }

  input[type="checkbox"]:checked + label::before {
    background-color: green;
    color: white;
  }
</style>

在这个示例中，当`<label>`元素与已选中的`<input>`关联时，`::before`伪元素会显示预设的文字（这里是"data-label"属性的内容），并应用指定的字体。如果你想要更改字体，只需修改`font-family`属性即可。