css - 是否可以像这样设置复选框的样式？

Question

我的设计具有非常特殊的方式来添加复选框。它用于过滤产品列表。选择过滤器后，复选框中间应该有一个黑框。但是，我似乎找不到该怎么做。

对于某些 JavaScript，我从复选框运行逻辑来确定它是否被选中，因此它肯定需要保留一个复选框。

有人有什么想法吗？

Answer 1

执行此操作的最佳方法是使用 appearance: none; 删除复选框的默认外观。从那里，你可以改变任何你想要的风格。这是一个接近您想要的示例。

/* The checkbox holder */
.checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

/* The checkbox */
.checkbox > input {
  /*
    Remove the default appearance.
  */
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  
  
  /*
    Set the size of the checkbox.
  */
  width: 20px;
  height: 20px;
  
  box-shadow: 0 0 0 2px black; /* Outer border */
  border: 3px solid white; /* Inner border */
}

/* The checkbox - when checked */
.checkbox > input:checked {
  background-color: black; /* The "check" */
}

<h1>Item List</h1>
<div class="checkbox">
  <input id="item1" type="checkbox">
  <label for="item1">Item 1</label>
</div>
<div class="checkbox">
  <input id="item2" type="checkbox">
  <label for="item2">Item 2</label>
</div>
<div class="checkbox">
  <input id="item3" type="checkbox">
  <label for="item3">Item 3</label>
</div>