如何/可以使用CSS设置未选中的复选框/（单选？）按钮的背景颜色样式？

Question

使用强调颜色https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color（在除 IE 之外的所有浏览器中），我们可以更改复选框元素的填充颜色选中时，但是在未选中时是否可以设置背景颜色的样式并不明显。

默认的“白色”颜色在大多数情况下都很好，但在尝试支持深色模式主题时，没有将操作系统设置为深色模式......设置此背景颜色似乎难以捉摸。

尝试过设置

background-color

的各种版本，使用

transparent

、

!important

等，但没有成功。是否有一个神奇的设置/技巧（不诉诸自定义元素而不是默认的 HTML 复选框/单选）？

*{
  font-family:sans-serif;
}
label{
  cursor:pointer;
  user-select:none;
}
input[type="checkbox"]{
  accent-color:purple;
}
input[type="raido"]{
  accent-color:red;
}

<label><input type="checkbox"/> Unchecked</label><br/>
<label><input type="checkbox" checked="checked"/> Checked</label><br/>
<label><input type="checkbox" disabled="disabled"/> Disabled</label><br/>

<hr/>

<label><input type="radio" name="related"/> Unchecked A</label><br/>
<label><input type="radio" name="related"/> Unchecked B</label><br/>
<label><input type="radio" name="related"/> Unchecked C</label><br/>
<label><input type="radio" name="related" checked="checked"/> Checked D</label><br/>
<label><input type="radio" name="related" disabled="disabled"/> Disabled</label><br/>

accent-color

在 caniuse.com 上：https://caniuse.com/mdn-css_properties_accent-color

Answer 1

您需要将

appearance

属性设置为

none

并自行重新设置复选框/单选按钮的样式。有点黑客，但这是我目前知道这样做的唯一方法。幸运的是，事实证明它的样式与非常简单的 CSS 几乎相同（请参见下面的代码片段）。

由于您仅在未选中时应用这些样式，因此您仍然可以在选中该框时保留

accent-color

样式，并且您应该得到您想要的结果。

input[type="checkbox"],
input[type="radio"] {
  accent-color: purple;
}

input[type="checkbox"]:not(:checked):not(:disabled),
input[type="radio"]:not(:checked):not(:disabled) {
  appearance: none;
  margin-bottom: 0;
  width: 1em;
  height: 1em;
  background: purple;
}

input[type="checkbox"]:not(:checked):not(:disabled) {
  border-radius: 2px;
}

input[type="radio"]:not(:checked):not(:disabled) {
  border-radius: 100px;
}

* {
  font-family:sans-serif;
}

label {
  cursor:pointer;
  user-select:none;
}

<label><input type="checkbox" /> Unchecked</label><br/>
<label><input type="checkbox" checked /> Checked</label><br/>
<label><input type="checkbox" disabled="disabled"/> Disabled</label><br/>

<hr/>

<label><input type="radio" name="related"/> Unchecked A</label><br/>
<label><input type="radio" name="related"/> Unchecked B</label><br/>
<label><input type="radio" name="related"/> Unchecked C</label><br/>
<label><input type="radio" name="related" checked="checked"/> Checked D</label><br/>
<label><input type="radio" name="related" disabled="disabled"/> Disabled</label>

Answer 2

使其变暗

div{
  background: #4b6b3b;
  color: white;
  padding: .5em;
}
input[type=checkbox], input[type=radio] {
        accent-color: #54ff00;
        box-shadow: 0px 0px 7px 1px #4b6b3b inset;
    }
}

<div>
Radio <input type="radio" name=r><input type="radio" name=r><br>
Checkbox <input type="checkbox"><br>
</div>