我已将 Google App Maker 中复选框的外观从“常规”更改为“切换”。我现在想在将旋钮从蓝色推到绿色时更改旋钮的外观。我怎样才能做到这一点?以下 CSS 样式无效:
.app-Checkbox-Input:checked, {
background-color: green;
}
如果可能的话,我还想将标签放在复选框的左侧。
最佳答案
要自定义开关,我们需要自定义旋钮本身和它后面的椭圆形区域(两件事),一旦我们覆盖选中状态的样式,我们还需要重新定义未选中状态的样式(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);
}
结果
关于css - 更改复选框按钮的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49615281/