jaredramirez / elm-select / Select.Styles

Add custom styling to the select.

Set up


type Config


type ControlConfig


type MenuConfig

default : Config

The default styling for the select

setControlStyles : ControlConfig -> Config -> Config

Set styles for the select control

    import Select.Styles as Styles


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

    selectBranding : Styles.Config
    selectBranding
        Styles.default
            |> setControlStyles controlBranding

setMenuStyles : MenuConfig -> Config -> Config

Set styles for the select menu

    import Select.Styles as Styles


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


    selectBranding : Styles.Config
    selectBranding
            Styles.default
                |> setMenuStyles menuBranding

Set styles for control

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

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

setControlPlaceholderOpacity : Basics.Float -> ControlConfig -> ControlConfig

setControlSeparatorColor : Css.Color -> ControlConfig -> ControlConfig

Set styles for menu

setMenuBackgroundColor : Css.Color -> MenuConfig -> MenuConfig

setMenuBorderRadius : Basics.Float -> MenuConfig -> MenuConfig

setMenuBoxShadowBlur : Basics.Float -> MenuConfig -> MenuConfig

setMenuBoxShadowColor : Css.Color -> MenuConfig -> MenuConfig

setMenuBoxShadowHOffset : Basics.Float -> MenuConfig -> MenuConfig

setMenuBoxShadowVOffset : Basics.Float -> MenuConfig -> MenuConfig

Get styles for control

getControlConfig : Config -> ControlConfig

Get the ControlConfig

import Select.Styles as Styles

baseStyles : Styles.Config
baseStyles =
    Styles.default

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

getControlBackgroundColor : Config -> Css.Color

getControlBackgroundColorHover : Config -> Css.Color

getControlBorderColor : Config -> Css.Color

getControlBorderColorFocus : Config -> Css.Color

getControlBorderColorHover : Config -> Css.Color

getControlClearIndicatorColor : Config -> Css.Color

getControlClearIndicatorColorHover : Config -> Css.Color

getControlDisabledOpacity : Config -> Basics.Float

getControlDropdownIndicatorColor : Config -> Css.Color

getControlDropdownIndicatorColorHover : Config -> Css.Color

getControlLoadingIndicatorColor : Config -> Css.Color

getControlPlaceholderOpacity : Config -> Basics.Float

getControlSeparatorColor : Config -> Css.Color

Get styles for menu

getMenuConfig : Config -> MenuConfig

Get the MenuConfig

import Select.Styles as Styles

baseStyles : Styles.Config
baseStyles =
    Styles.default

baseMenuStyles : Styles.ControlConfig
baseMenuStyles =
    Styles.getMenuConfig baseStyles
        |> Styles.setMenuBorderRadius 4

getMenuBackgroundColor : MenuConfig -> Css.Color

getMenuBorderRadius : MenuConfig -> Basics.Float

getMenuBoxShadowColor : MenuConfig -> Css.Color

getMenuBoxShadowHOffset : MenuConfig -> Basics.Float

getMenuBoxShadowVOffset : MenuConfig -> Basics.Float

getMenuBoxShadowBlur : MenuConfig -> Basics.Float