如何隐藏复选框不确定状态图标而使用背景颜色？

.checkbox {
  appearance: none;
  background-color: #f00; /* 设置背景颜色 */
  border: none; /* 可选，去除边框 */
  width: 20px; /* 可选，设置复选框宽度 */
  height: 20px; /* 可选，设置复选框高度 */
}

.checkbox:checked {
  /* 设置选中状态下的样式，可根据需求自定义 */
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<span class="checkbox">
  <i class="far fa-square"></i>
</span>

.checkbox {
  color: #f00; /* 设置背景颜色 */
  /* 可选，设置字体图标大小 */
}

.checkbox i {
  display: none; /* 隐藏不确定状态图标 */
}

.checkbox.checked {
  /* 设置选中状态下的样式，可根据需求自定义 */
}

.checkbox {
  background-image: url('path/to/background-image.png'); /* 设置背景图片 */
  background-size: cover; /* 可选，调整背景图片的尺寸 */
  width: 20px; /* 可选，设置复选框宽度 */
  height: 20px; /* 可选，设置复选框高度 */
}

.checkbox:checked {
  /* 设置选中状态下的样式，可根据需求自定义 */
}