Google App Maker中Switch复选框样式调整及标签位置设置咨询

Got it, let's work through your two checkbox customization needs step by step:

1. Change checked switch knob color to green #

Your original CSS target was incorrect because the "Switch" style checkbox hides the native <input> element and uses custom styled elements for the track and knob. Here's the correct CSS to target the active knob:

/* Target the switch thumb when the checkbox is checked */
.app-Checkbox-Input:checked ~ .app-Checkbox-Switch .app-Checkbox-SwitchThumb {
  background-color: green;
  /* Optional: Add transition for smooth color change */
  transition: background-color 0.2s ease;
}

Why this works: #

• The .app-Checkbox-SwitchThumb is the actual visible knob element
• We use the sibling selector (~) to target the switch container that comes after the hidden checked input
• Adding a transition makes the color shift feel smoother, which is optional but improves UX

2. Move label to the left of the switch #

This can be done by adjusting the flex layout of the checkbox container. Add this CSS to reverse the order of elements:

/* Reverse the flex order for switch-style checkboxes */
.app-Checkbox--Switch {
  flex-direction: row-reverse;
  justify-content: flex-end; /* Preserves default spacing between label and switch */
}

Notes: #

• Using .app-Checkbox--Switch ensures this only affects checkboxes set to "Switch" style (instead of all checkboxes)
• justify-content: flex-end keeps the spacing between the label and switch consistent with the default layout, so things don't look misaligned

Make sure to add these CSS rules in your App Maker project's Custom CSS section (either globally under App Settings, or on specific pages if you only want this to apply there).

内容的提问来源于stack exchange，提问作者Johan W.