Implement in Webflow
Apply attributes to elements on the page
Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.
Input Active works without custom attributes
Input Active applies an active class to an input when it is active.
By default the active class is-active-inputactive. To use this active class name, no attributes are required. Input Active works without any attributes applied to the page.
To customize the custom class, use the option below.
This class will be added to the input when the input is active. The class will be removed when the input is not active.
If this attribute is not added, the default active class is is-active-inputactive.
This attribute option works similar to CSS style inheriting. Active classes cascade down until overwritten. Children elements inherit the fs-inputactive-class attribute their of parents.
For example, if this attribute is placed on a Div Block wrapping a group of Checkbox Field elements, the Checkbox Fields will inherit the class set on the parent Div Block.
If one of the Checkbox Field elements was given a different fs-inputactive-class, that one Checkbox Field will overwrite the inherited class of the parent.
See this solution working live in this Webflow project.