css - 在 Firefox 中删除所需的复选框边框

Question

如果复选框是 required , Firefox 将对其应用红色边框，即使表单尚未提交。我怎样才能删除或防止此边框？

<input type='checkbox' required />

我尝试应用以下样式，但均无效。

input[type=checkbox]:invalid {
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
}

input[type=checkbox]:required {
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
}

现在我没主意了:/

Answer 1

您看到的红色边框是 box-shadow。您可以将其设置为 none。

input[type=checkbox]:invalid {
  box-shadow: none;
}

input[type=checkbox]:invalid {
  box-shadow: none;
}

<input type="checkbox" required>