css - 更改复选框按钮的颜色

Question

我已将 Google App Maker 中复选框的外观从“常规”更改为“切换”。我现在想在将旋钮从蓝色推到绿色时更改旋钮的外观。我怎样才能做到这一点？以下 CSS 样式无效:

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

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

Answer 1

要自定义开关，我们需要自定义旋钮本身和它后面的椭圆形区域(两件事)，一旦我们覆盖选中状态的样式，我们还需要重新定义未选中状态的样式(2 个州)。是什么为我们提供了 2x2=4 自定义样式。我们还有多种方式来实现样式:为每个小部件单独覆盖它们、自定义内置 AM 样式、从头开始实现全新样式或使用 CSS 类扩展 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);
}

结果