Toggle component CSS

warning

The content on this page is outdated and will not receive updates. For the most up-to-date functionality, refer to Setting up and managing flows.

This topic provides examples of the main CSS classes/selectors you can use to customize toggle components.

Default player CSS

You can use the following main classes/selectors to apply additional CSS styling to toggle components in a flow running the default player.

Class/Selector	Description
.page-component-toggle	The main class applied to the entire toggle component in a flow. For example, to increase the padding around all toggle components in a flow: .page-component-toggle {padding:15px}
.toggle	The main class applied to the toggle switch of the component. For example, to modify the background color of the toggle switch: .toggle {background:#eeeeee}

Default legacy player CSS

You can use the following classes/selectors to apply additional CSS styling to toggle components in a flow running the default legacy player.

The shape and background attributes are typically used to modify the toggle switch, see Attributes reference.

Class/Selector	Description
.mw-toggle	The main class applied to the entire toggle component within a flow. For example, to increase the padding around the toggle switch: .mw-toggle {padding:15px;}