Css 更改复选框按钮的颜色

我在Google App Maker中将复选框的外观从常规更改为切换。我现在想改变的外观旋钮时，它是推动从蓝色到绿色。我该怎么做？以下CSS样式不起作用：

.app-Checkbox-Input:checked, {
  background-color: green;
}

---

如果可能的话，我还想把标签放在复选框的左侧。

要自定义开关，我们需要自定义旋钮本身和旋钮后面的椭圆形区域两件事，一旦我们覆盖了选中状态的样式，我们还需要为其未选中状态2状态重新定义样式。是什么给了我们2x2=4个自定义样式。我们还有多种实现样式的方法：为每个小部件分别覆盖它们、自定义内置AM样式、从头实现全新样式或使用CSS类扩展AM内置样式。这次我不会在回答中涵盖所有这些选项，但让我们至少从以下内容开始：

单个小部件的样式：

使用开关样式变量重新选中所有复选框

.app-Checkbox--Switch>.app-Checkbox-Label::after {
  background-color: green;
}

.app-Checkbox--Switch>.app-Checkbox-Input:checked+.app-Checkbox-Label::after {
  background-color: red;
}

.app-Checkbox--Switch>.app-Checkbox-Input {
  background-color: rgba(0, 128, 0, 0.4);
}

.app-Checkbox--Switch>.app-Checkbox-Input:checked {
  background-color: rgba(128, 0, 0, 0.4);
}

结果

---

检查后你有个逗号非常感谢Pavel。这是非常有用的。

.app-Checkbox--Switch>.app-Checkbox-Label::after {
  background-color: green;
}

.app-Checkbox--Switch>.app-Checkbox-Input:checked+.app-Checkbox-Label::after {
  background-color: red;
}

.app-Checkbox--Switch>.app-Checkbox-Input {
  background-color: rgba(0, 128, 0, 0.4);
}

.app-Checkbox--Switch>.app-Checkbox-Input:checked {
  background-color: rgba(128, 0, 0, 0.4);
}