Borders are implemented using the "border-as-shadow" technique instead of standard border properties.

Shadows don't affect a box models dimensions preventing annoying pixel jumps.

Elm-select uses 3 box shadow layers to implement the border:

- The inset
- The active border
- The shadow

The default styling for the select

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

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

Set styles for the Select menu

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




    selectBranding : Config
    selectBranding
        default
            |> setMenuStyles menuBranding

Set styles for Select menu item groups

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




    selectBranding : Config
    selectBranding
            default
                |> setGroupStyles groupBranding

Set styles for Select menu item

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




    selectBranding : Config
    selectBranding
            default
                |> setMenuItemStyles menuItemBranding

Get the ControlConfig

baseStyles : Config
baseStyles =
    default


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

Get the MenuConfig

baseStyles : Config
baseStyles =
    default


baseMenuStyles : MenuConfig
baseMenuStyles =
    getMenuConfig baseStyles
        |> setMenuBorderRadius 4

Get the GroupConfig

baseStyles : Config
baseStyles =
    default


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

Get the MenuItemConfig

baseStyles : Config
baseStyles =
    default


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

A fun dark theme

For the Bootstrap4 lovers