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

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>