Style with CSS

The controls can be customized to your own needs. For this purpose, the controls can be designed via CSS.

The different parts of the controls can be designed with CSS. Since the internals of the components are located in a ShadowDOM, access is via the CSS pseudo element parts.


#control::part(part-name) {
    background-color: white;
}

The parts to be used are documented with the controls.

CSS Variables

Use Monster's custom CSS properties for fast and forward-thinking design.

The Monster form uses many custom CSS properties (variables) for real-time customizations. These provide easy access to commonly used values like our theme colors or primary font stacks when working in your browser's inspector, in a code sandbox, or in general prototyping.

To avoid conflicts with third-party CSS, all custom properties are prefixed with monster-.

Here are the variables we include (note that the :root is required) that can be accessed anywhere Monster Form's CSS is loaded.


.:root {
    --monster-border-color: #ff7;
}
variabledefault valuedescription
--monster-accent-colorrgba(124, 124, 124, 0.3)
--monster-bg-colorwhitegeneral background color of controls
--monster-border-colorblackborder color
--monster-border-radius
--monster-border-width1pxborder width
--monster-btn-bg-colorwhitebutton background color
--monster-btn-border-colorblack
--monster-btn-colorblackbutton color
--monster-colorblackgeneral color
--monster-color-activitygrey
--monster-color-failedred
--monster-color-successfuldarkgreen
--monster-disabled-background-colorrgba(239, 239, 239, 0.3)
--monster-disabled-border-colorrgba(118, 118, 118, 0.3)
--monster-disabled-colorrgb(84, 84, 84)
--monster-font-family-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-seriffont stack
--monster-hover-colorrgb(163, 0, 34)
--monster-popper-witharrrow-distance-4pxdistance popper with arrow
--monster-selected-colorrgba(124,124,124,0.3)selected color