gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 01:56:13 24 4
gpt4 key购买 nike

我已将 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);
}

结果

Recolored switch

关于css - 更改复选框按钮的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49615281/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com