Add custom styling to the Select control, menu and menu item.
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.
default : Config
The default styling for the select
This is the Config that all select variants use if no styles have been configured.
Set styles
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
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
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
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
Get styles
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
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 {}
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
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
dracula : Config
A fun dark theme
bootstrap4 : Config
For the Bootstrap4 lovers