Drop Down Button - CSS API Reference

All Common CSS variables:

Specific CSS variables for Drop Down Button styling:

• --smart-drop-down-button-default-width: Defines DropDownButton and ComboBox default width.
• --smart-drop-down-button-default-height: Defines DropDownButton and ComboBox default height.

The following CSS selectors can be used to style DropDownButton:

• smart-drop-down-button - the element itself. Can be used to set width and height for the whole element.
  • .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 internal contents of the element.
      • .smart-buttons-container - a container for the action button and the drop down buttons.
        • .smart-input .smart-action-button - an HTML SPAN element used as an action button.
        • .smart-drop-down-button - an HTML Span element used as a button for the drop down.
          • SPAN element - a SPAN element used for the icon of the button.
      • .smart-drop-down .smart-drop-down-container - a container for the drop down elements.
        • smart-scroll-viewer - smartScrollViewer - used to store the content of the popup.
        • .smart-drop-down-resize-bar - a resize bar that allows to resize the drop down element.
    • .smart-hint - the hint of the element.

Demo

<style>
        #dropdownbutton{
                    --smart-drop-down-element-max-height: 250px;
                    --smart-drop-down-button-border-top-right-radius: 50%;
                    --smart-drop-down-button-border-top-left-radius: 50%;
                    --smart-drop-down-button-border-bottom-left-radius: 50%;
                    --smart-drop-down-button-border-bottom-right-radius: 50%;
        }
</style>