如何用CSS美化HTML多选框？

首先，创建你的多选框元素。通常，会紧跟一个标签来提供可点击的区域，这样用户不仅仅只能点击小小的多选框：

<label class="custom-checkbox">
  <input type="checkbox" id="checkbox1">
  <span class="checkmark"></span>
  同意条款
</label>

CSS
然后，使用CSS来隐藏原生的多选框，并创建一个自定义的样式。这里使用伪元素来创建未选中和选中状态的视觉效果：

    /* 隐藏原生多选框 */
    .custom-checkbox input {
      display: none;
    }
    
    /* 创建一个新的自定义框 */
    .custom-checkbox .checkmark {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 10px;
      border: 1px solid #ddd;
      vertical-align: middle;
      cursor: pointer;
      position: relative;
    }
    
    /* 当多选框被选中时，改变checkmark的背景和添加一个勾 */
    .custom-checkbox input:checked + .checkmark {
      background-color: #2196F3;
    }
    
    .custom-checkbox .checkmark:after {
      content: "";
      position: absolute;
      display: none;
    }
    
    .custom-checkbox input:checked + .checkmark:after {
      display: block;
    }

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

JavaScript（可选）
如果需要额外的交互效果，比如在选中或取消选中时触发特定动作，可以添加一些JavaScript代码。但对于多数情况，纯CSS就足够了。

这个例子展示的是一个基本的美化多选框的方法，你可以根据自己的需要来调整样式和行为。通过CSS，你可以实现各种视觉效果，例如改变颜色、添加动画、修改形状等。