更改复选框按钮的颜色

Question

我在 Google App Maker 中将复选框的外观从 "Regular" 更改为 "Switch"。我现在想在将旋钮从蓝色推到绿色时更改旋钮的外观。我怎样才能做到这一点？以下 CSS 样式无效：

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

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

Answer 1

要自定义开关，我们需要自定义旋钮本身和它后面的椭圆形区域（2 个东西），一旦我们覆盖选中状态的样式，我们还需要重新定义未检查状态的样式（2 个状态）。是什么给了我们 2x2=4 自定义样式。我们还有多种实现样式的方法：为每个小部件单独覆盖它们，自定义 built-it AM 样式，从头开始实现 all-new 样式或使用 CSS [=38 扩展 AM 内置样式=].这次我不会在这个答案中涵盖所有这些选项，但让我们至少从一些事情开始：

单个小部件的样式：

/* Styles for Checkbox widget on the page NewPage with name
   GreenSwitch */

/* Recolor knob's checked state */
.app-NewPage-GreenSwitch-Label::after {
  background-color: green;
}

/* Recolor knob's unckecked state */
.app-NewPage-GreenSwitch>.app-NewPage-GreenSwitch-Input:checked+.app-NewPage-GreenSwitch-Label::after {
  background-color: red;
}

/* Recolor back oval checked state */
.app-NewPage-GreenSwitch-Input {
  background-color: rgba(0, 128, 0, 0.4);
}

/* Recolor back oval unchecked state */
.app-NewPage-GreenSwitch-Input:checked {
  background-color: rgba(128, 0, 0, 0.4);
}

使用 Switch 样式变体

重新着色所有复选框

.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);
}

结果

更改复选框按钮的颜色

Change color of checkbox button

css

css-selectors

google-app-maker