在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>