Drop Down List CSS API Reference

All Common CSS variables:

    Specific CSS variables for Drop Down List styling:

    • --smart-drop-down-list-default-width: Defines DropDownList and ComboBox default width.
    • --smart-drop-down-list-default-height: Defines DropDownList and ComboBox default height.

    Specific CSS variables for DropDowns styling:

    • --smart-editor-drop-down-width: Defines DropDownList and ComboBox drop down default width.
    • --smart-editor-drop-down-padding-size: Defines DropDownList and ComboBox drop down default height.
    • --smart-editor-drop-down-height: Defines DropDownList and ComboBox drop down default height.
    • --smart-editor-drop-down-max-width: Defines DropDownList, ComboBox, TextBox popup max width.
    • --smart-editor-drop-down-min-width: Defines DropDownList, ComboBox, TextBox popup min width.
    • --smart-editor-drop-down-max-height: Defines DropDownList, ComboBox, TextBox popup max height.
    • --smart-editor-drop-down-min-height: Defines DropDownList, ComboBox, TextBox popup min height.
    • --smart-editor-drop-down-button-width: Defines DropDownList, ComboBox, DownButton, DatetimePicker default width.
    • --smart-editor-drop-down-resize-bar-height: DropDownList, ComboBox, TextBox popup resize bar default height.
    • --smart-editor-drop-down-vertical-offset: Defines the vertical offset between drop down and action button part.
    • --smart-editor-drop-down-z-index: Defines dropDown's z-index.

    The following CSS selectors can be used to style DropDownList:

    • smart-drop-down-list - 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-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 listBox 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-list-box - smartListBox - the popup. Can be styled like every other smartListBox element.
        • .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>
        #dropdownlist{
                    --smart-drop-down-list-border-top-right-radius: 10px;
                    --smart-drop-down-list-border-top-left-radius: 10px;
                    --smart-drop-down-list-border-bottom-left-radius: 10px;
                    --smart-drop-down-list-border-bottom-right-radius: 10px;
        }
</style>