Multi Split Button CSS API Reference

All Common CSS variables:

    Specific CSS variables for Multi Split Button styling:

    • --smart-multi-split-button-default-width: Element's default width.
    • --smart-multi-split-button-default-height: Element's default height.

    The following CSS selectors can be used to style MultiSplitButton:

    • smart-multi-split-button - applied to the whole MultiSplit button.
      • .smart-container - the container that holds all of the internals of the element. Shoudn't be used for styling.
        • .smart-label - the label of the element.
        • .smart-content - a container for the drop down and selection field.
        • .smart-action-button -
          • .smart-multi-split-button-buttons - split buttons container.
            • .smart-action-split-button - a split button.
          • .smart-drop-down-button - an HTML Span element used as a button for the listBox drop down.
            • SPAN element - an HTML Span element used for the arrow icon of the button.
          • .smart-drop-down .smart-drop-down-container - a container for the drop down popup.
            • smart-list-box - smartListBox - the popup. Can be styled like every other smartListBox element.
            • .smart-drop-down-resize-bar - the resize bar which can be used to resize the drop down popup.
          • DIV element - a simple DIV element used as a resizing indicator.
        • .smart-hint - a container for the hint of the element.

    Demo

    <style>
            #multisplitbutton{
                    --smart-color: #ccc;
                    --smart-font-size: 20px;
            }
    </style>