Select.Styles
Add custom styling to the Select control, menu and menu item.
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 MenuItemConfig
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
Set styles for the select control
controlBranding : ControlConfig
controlBranding =
getControlConfig default
|> setControlBorderColor (Css.hex "#FFFFFF")
|> setControlBorderColorFocus (Css.hex "#0168B3")
selectBranding : Config
selectBranding
default
|> setControlStyles controlBrandingMenu
Set styles for the Select menu
menuBranding : MenuConfig
menuBranding =
getMenuConfig default
|> setMenuBackgroundColor (Css.hex "#000000")
|> setMenuBorderRadius 4
selectBranding : Config
selectBranding
default
|> setMenuStyles menuBrandingMenu item
Set styles for Select menu item
menuItemBranding : MenuItemConfig
menuItemBranding =
getMenuItemConfig default
|> setMenuItemBackgroundColorNotSelected (Css.hex "#000000")
selectBranding : Config
selectBranding
default
|> setMenuItemStyles menuItemBrandingGetters
Get styles
Control
Get the ControlConfig
baseStyles : Config
baseStyles =
default
baseControlStyles : ControlConfig
baseControlStyles =
getControlConfig baseStyles
|> setControlBorderColor (Css.hex "ffffff")Menu
Get the MenuConfig
baseStyles : Config
baseStyles =
default
baseMenuStyles : MenuConfig
baseMenuStyles =
getMenuConfig baseStyles
|> setMenuBorderRadius 4Menu item
Get the MenuItemConfig
baseStyles : Config
baseStyles =
default
baseMenuStyles : MenuItemConfig
baseMenuStyles =
getMenuItemConfig baseStyles
|> setMenuItemBackgroundColorSelected (Css.hex "#000000")