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

Question

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

我有逻辑运行从复选框是否选中某些 JavaScript 所以它肯定需要保留一个复选框。

有人有什么想法吗？

Answer 1

这肯定不是唯一的方式，但是你可以在输入上设置appearance: none，然后用自定义内容和:after内容替换它.这在 Chrome 的代码片段中似乎工作正常——不确定它在其他浏览器上的转换效果如何。

input[type="checkbox"] {
  appearance: none;
  border: 1px solid black;
  height: 1rem;
  width: 1rem;
  vertical-align: bottom;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

input[type="checkbox"]:checked:after {
  content: "";
  background-color: black;
  height: 0.8rem;
  width: 0.75rem;
}

<label for="myCheckbox">My Checkbox</label>
<input type="checkbox" id="myCheckbox" name="myCheckbox" />

Answer 2

执行此操作的最佳方法是使用 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>

Answer 3

我会这样做...

const myForm = document.forms['my-form']

myForm.onsubmit = e =>
  {
  e.preventDefault() // disable submit 

  let inputJSON =
    Array
    .from(new FormData(myForm))
    .reduce( (r, [name,value]) =>
      {
      if (name.endsWith('[]'))
        {
        name    = name.slice(0,-2)
        r[name] = r[name] ?? []
        r[name].push(value)
        }
      else r[name] = value; 
      return r
      } ,{})
  console.clear()
  console.log( inputJSON  )
  }

label { 
  display : block; 
  margin  : 10px; 
  }
input[type="checkbox"] {
  appearance     : none;
  --size         : 20px;
  position       : relative;
  width          : var(--size);
  height         : var(--size);
  vertical-align : text-bottom;
  }
input[type="checkbox"]::before {
  position   : absolute;
  display    : block;
  top        : 0;
  left       : 0;
  width      : 100%;
  height     : 100%;
  content    : '';
  box-sizing : border-box;
  border     : 2px solid darkblue;
  }
input[type="checkbox"]:checked::after {
  position   : absolute;
  display    : block;
  top        : 4px;
  left       : 4px;
  width      : calc(100% - 8px);
  height     : calc(100% - 8px);
  background : #3a5079;
  content    : '';
  } 

/* --- other thinks ---*/
fieldset {
  width : 240px;
  }
legend {
  text-transForm : uppercase;
  font-size      : 20px;
  }
  
/*-- just SO snippet --*/  
.as-console-wrapper { max-height:100% !important; top:0; left:50% !important; width:50%; }
.as-console-row         { background-color: yellow; }
.as-console-row::after  { display:none !important; }

<form name="my-form" >
  <fieldset>
    <legend>Ingredient</legend>
    <label><input type="checkbox" name="Ingredient[]" value="Beef"> Beef</label>
    <label><input type="checkbox" name="Ingredient[]" value="pork"> Pork</label>
    <label><input type="checkbox" name="Ingredient[]" value="Chicken"> Chicken</label>
    <label><input type="checkbox" name="Ingredient[]" value="Vegetables"> Vegetables</label>
  </fieldset>

  <button type="submit">submit</button>
</form>

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

Is it possible to style a checkbox like this?

css

sass