Confidenceman02 / elm-select / Select.Styles

Add custom styling to the Select control, menu and menu item.

elm-select

Set up

Styles for the different sections of the Select all have their own configuration. This means when you are setting styles to the MenuConfig you can only use the Setters for the MenuConfig.

NOTE: The native Select variant only respects some of the styles.


type Config


type ControlConfig


type MenuConfig


type MenuControlConfig compatible


type GroupConfig


type MenuItemConfig

default : Config

The default styling for the select

This is the Config that all select variants use if no styles have been configured.

Setters

Set styles

Control

setControlStyles : ControlConfig -> Config -> Config

Set styles for the select control

    controlBranding : ControlConfig
    controlBranding =
        getControlConfig default
            |> setControlBorderColor (Css.hex "#FFFFFF")
            |> setControlBorderColorFocus (Css.hex "#0168B3")

    selectBranding : Config
    selectBranding
        default
            |> setControlStyles controlBranding

setControlBackgroundColor : Css.Color -> ControlConfig -> ControlConfig

setControlBackgroundColorHover : Css.Color -> ControlConfig -> ControlConfig

setControlBorderColor : Css.Color -> ControlConfig -> ControlConfig

setControlBorderColorFocus : Css.Color -> ControlConfig -> ControlConfig

setControlBorderColorHover : Css.Color -> ControlConfig -> ControlConfig

setControlBorderRadius : Basics.Float -> ControlConfig -> ControlConfig

setControlColor : Css.Color -> ControlConfig -> ControlConfig

setControlClearIndicatorColor : Css.Color -> ControlConfig -> ControlConfig

setControlClearIndicatorColorHover : Css.Color -> ControlConfig -> ControlConfig

setControlDisabledOpacity : Basics.Float -> ControlConfig -> ControlConfig

setControlDropdownIndicatorColor : Css.Color -> ControlConfig -> ControlConfig

setControlDropdownIndicatorColorHover : Css.Color -> ControlConfig -> ControlConfig

setControlLoadingIndicatorColor : Css.Color -> ControlConfig -> ControlConfig

setControlMinHeight : Basics.Float -> ControlConfig -> ControlConfig

setControlMultiTagBackgroundColor : Css.Color -> ControlConfig -> ControlConfig

setControlMultiTagBorderRadius : Basics.Float -> ControlConfig -> ControlConfig

setControlMultiTagColor : Css.Color -> ControlConfig -> ControlConfig

setControlMultiTagDismissibleBackgroundColor : Css.Color -> ControlConfig -> ControlConfig

setControlMultiTagDismissibleBackgroundColorHover : Css.Color -> ControlConfig -> ControlConfig

setControlMultiTagTruncationWidth : Basics.Float -> ControlConfig -> ControlConfig

setControlSelectedColor : Css.Color -> ControlConfig -> ControlConfig

setControlPlaceholderOpacity : Basics.Float -> ControlConfig -> ControlConfig

setControlSeparatorColor : Css.Color -> ControlConfig -> ControlConfig

Menu

setMenuStyles : MenuConfig -> Config -> Config

Set styles for the Select menu

    menuBranding : MenuConfig
    menuBranding =
        getMenuConfig default
            |> setMenuBackgroundColor (Css.hex "#000000")
            |> setMenuBorderRadius 4


    selectBranding : Config
    selectBranding
        default
            |> setMenuStyles menuBranding

setMenuBackgroundColor : Css.Color -> MenuConfig -> MenuConfig

setMenuBorderRadius : Basics.Float -> MenuConfig -> MenuConfig

setMenuBorderWidth : Basics.Float -> MenuConfig -> MenuConfig

setMenuBoxShadowBlur : Basics.Float -> MenuConfig -> MenuConfig

setMenuBoxShadowColor : Css.Color -> MenuConfig -> MenuConfig

setMenuBoxShadowHOffset : Basics.Float -> MenuConfig -> MenuConfig

setMenuBoxShadowVOffset : Basics.Float -> MenuConfig -> MenuConfig

getMenuControlBackgroundColorHover : MenuConfig -> Css.Color

setMenuControlBackgroundColor : Css.Color -> MenuConfig -> MenuConfig

setMenuControlBackgroundColorHover : Css.Color -> MenuConfig -> MenuConfig

setMenuControlBorderColor : Css.Color -> MenuConfig -> MenuConfig

setMenuMaxHeightPx : Css.Px -> MenuConfig -> MenuConfig

setMenuMaxHeightVh : Css.Vh -> MenuConfig -> MenuConfig

setMenuPosition : Css.Position {} -> MenuConfig -> MenuConfig

Group

setGroupStyles : GroupConfig -> Config -> Config

Set styles for Select menu item groups

    groupBranding : GroupConfig
    groupBranding =
        getGroupConfig default
            |> setGroupColor (Css.hex "#000000")


    selectBranding : Config
    selectBranding
            default
                |> setGroupStyles groupBranding

setGroupColor : Css.Color -> GroupConfig -> GroupConfig

setGroupFontSizeLabel : Css.FontSize a -> GroupConfig -> GroupConfig

setGroupFontWeightLabel : Css.FontWeight a -> GroupConfig -> GroupConfig

setGroupTextTransformationLabel : Css.TextTransform a -> GroupConfig -> GroupConfig

Menu item

setMenuItemStyles : MenuItemConfig -> Config -> Config

Set styles for Select menu item

    menuItemBranding : MenuItemConfig
    menuItemBranding =
        getMenuItemConfig default
            |> setMenuItemBackgroundColor (Css.hex "#000000")


    selectBranding : Config
    selectBranding
            default
                |> setMenuItemStyles menuItemBranding

setMenuItemBackgroundColorMouseDown : Css.Color -> MenuItemConfig -> MenuItemConfig

setMenuItemBackgroundColorSelected : Css.Color -> MenuItemConfig -> MenuItemConfig

setMenuItemBackgroundColorHover : Css.Color -> MenuItemConfig -> MenuItemConfig

setMenuItemBackgroundColorHoverSelected : Css.Color -> MenuItemConfig -> MenuItemConfig

setMenuItemBlockPadding : Basics.Float -> MenuItemConfig -> MenuItemConfig

setMenuItemBorderRadius : Basics.Float -> MenuItemConfig -> MenuItemConfig

setMenuItemColor : Css.Color -> MenuItemConfig -> MenuItemConfig

setMenuItemColorSelected : Css.Color -> MenuItemConfig -> MenuItemConfig

setMenuItemColorMouseDown : Css.Color -> MenuItemConfig -> MenuItemConfig

setMenuItemBackgroundColor : Css.Color -> MenuItemConfig -> MenuItemConfig

setMenuItemColorHoverSelected : Css.Color -> MenuItemConfig -> MenuItemConfig

setMenuItemInlinePadding : Basics.Float -> MenuItemConfig -> MenuItemConfig

setMenuItemColorHover : Css.Color -> MenuItemConfig -> MenuItemConfig

setMenuControlBorderColorFocus : Css.Color -> MenuConfig -> MenuConfig

setMenuControlBorderColorHover : Css.Color -> MenuConfig -> MenuConfig

setMenuControlBorderRadius : Basics.Float -> MenuConfig -> MenuConfig

setMenuControlClearIndicatorColor : Css.Color -> MenuConfig -> MenuConfig

setMenuControlClearIndicatorColorHover : Css.Color -> MenuConfig -> MenuConfig

setMenuControlColor : Css.Color -> MenuConfig -> MenuConfig

setMenuControlDisabledOpacity : Basics.Float -> MenuConfig -> MenuConfig

setMenuControlLoadingIndicatorColor : Css.Color -> MenuConfig -> MenuConfig

setMenuControlMinHeight : Basics.Float -> MenuConfig -> MenuConfig

setMenuControlPlaceholderOpacity : Basics.Float -> MenuConfig -> MenuConfig

setMenuControlSearchIndicatorColor : Css.Color -> MenuConfig -> MenuConfig

Getters

Get styles

Control

getControlConfig : Config -> ControlConfig

Get the ControlConfig

baseStyles : Config
baseStyles =
    default

baseControlStyles : ControlConfig
baseControlStyles =
    getControlConfig baseStyles
        |> setControlBorderColor (Css.hex "ffffff")

getControlBackgroundColor : ControlConfig -> Css.Color

getControlBackgroundColorHover : ControlConfig -> Css.Color

getControlBorderColor : ControlConfig -> Css.Color

getControlColor : ControlConfig -> Css.Color

getControlBorderColorFocus : ControlConfig -> Css.Color

getControlBorderColorHover : ControlConfig -> Css.Color

getControlBorderRadius : ControlConfig -> Basics.Float

getControlClearIndicatorColor : ControlConfig -> Css.Color

getControlClearIndicatorColorHover : ControlConfig -> Css.Color

getControlDisabledOpacity : ControlConfig -> Basics.Float

getControlDropdownIndicatorColor : ControlConfig -> Css.Color

getControlDropdownIndicatorColorHover : ControlConfig -> Css.Color

getControlLoadingIndicatorColor : ControlConfig -> Css.Color

getControlMinHeight : ControlConfig -> Basics.Float

getControlMultiTagBackgroundColor : ControlConfig -> Css.Color

getControlMultiTagBorderRadius : ControlConfig -> Basics.Float

getControlMultiTagColor : ControlConfig -> Css.Color

getControlMultiTagDismissibleBackgroundColor : ControlConfig -> Css.Color

getControlMultiTagDismissibleBackgroundColorHover : ControlConfig -> Css.Color

getControlMultiTagTruncationWidth : ControlConfig -> Maybe Basics.Float

getControlPlaceholderOpacity : ControlConfig -> Basics.Float

getControlSelectedColor : ControlConfig -> Css.Color

getControlSeparatorColor : ControlConfig -> Css.Color

Menu

getMenuConfig : Config -> MenuConfig

Get the MenuConfig

baseStyles : Config
baseStyles =
    default

baseMenuStyles : MenuConfig
baseMenuStyles =
    getMenuConfig baseStyles
        |> setMenuBorderRadius 4

getMenuBackgroundColor : MenuConfig -> Css.Color

getMenuBorderRadius : MenuConfig -> Basics.Float

getMenuBorderWidth : MenuConfig -> Basics.Float

getMenuBoxShadowColor : MenuConfig -> Css.Color

getMenuBoxShadowHOffset : MenuConfig -> Basics.Float

getMenuBoxShadowVOffset : MenuConfig -> Basics.Float

getMenuBoxShadowBlur : MenuConfig -> Basics.Float

getMenuControlBackgroundColor : MenuConfig -> Css.Color

getMenuDividerColor : MenuConfig -> Css.Color

getMenuControlBorderColor : MenuConfig -> Css.Color

getMenuControlBorderColorFocus : MenuConfig -> Css.Color

getMenuControlBorderColorHover : MenuConfig -> Css.Color

getMenuControlBorderRadius : MenuConfig -> Basics.Float

getMenuControlClearIndicatorColor : MenuConfig -> Css.Color

getMenuControlClearIndicatorColorHover : MenuConfig -> Css.Color

getMenuControlColor : MenuConfig -> Css.Color

getMenuControlDisabledOpacity : MenuConfig -> Basics.Float

getMenuControlLoadingIndicatorColor : MenuConfig -> Css.Color

getMenuControlMinHeight : MenuConfig -> Basics.Float

getMenuControlPlaceholderOpacity : MenuConfig -> Basics.Float

getMenuControlSearchIndicatorColor : MenuConfig -> Css.Color

getMenuMaxHeight : MenuConfig -> String

getMenuPosition : MenuConfig -> Css.Position {}

Group

getGroupConfig : Config -> GroupConfig

Get the GroupConfig

baseStyles : Config
baseStyles =
    default

baseGroupStyles : GroupConfig
baseGroupStyles =
    getGroupConfig baseStyles
        |> setGroupColor (Css.hex "#000000")

getGroupColor : GroupConfig -> Css.Color

getGroupFontSizeLabel : GroupConfig -> String

getGroupFontWeightLabel : GroupConfig -> String

getGroupTextTransformationLabel : GroupConfig -> String

Menu item

getMenuItemConfig : Config -> MenuItemConfig

Get the MenuItemConfig

baseStyles : Config
baseStyles =
    default

baseMenuStyles : MenuItemConfig
baseMenuStyles =
    getMenuItemConfig baseStyles
        |> setMenuItemBackgroundColorSelected (Css.hex "#000000")

getMenuItemBackgroundColorSelected : MenuItemConfig -> Css.Color

getMenuItemBackgroundColorMouseDown : MenuItemConfig -> Css.Color

getMenuItemBackgroundColorHover : MenuItemConfig -> Css.Color

getMenuItemBlockPadding : MenuItemConfig -> Basics.Float

getMenuItemBorderRadius : MenuItemConfig -> Basics.Float

getMenuItemColor : MenuItemConfig -> Css.Color

getMenuItemColorSelected : MenuItemConfig -> Css.Color

getMenuItemColorMouseDown : MenuItemConfig -> Css.Color

getMenuItemColorHover : MenuItemConfig -> Css.Color

getMenuItemColorHoverSelected : MenuItemConfig -> Css.Color

getMenuItemBackgroundColorHoverSelected : MenuItemConfig -> Css.Color

getMenuItemInlinePadding : MenuItemConfig -> Basics.Float

getMenuItemBackgroundColor : MenuItemConfig -> Maybe Css.Color

Theme

dracula : Config

A fun dark theme

elm-select

bootstrap4 : Config

For the Bootstrap4 lovers