Skip to content

Select

Select is a class used to style the h-select webcomponent.

Structurally there are four main elements: .select, .select-option, .select-search and .select-toggler.

The .select element contains the following sub elements:

  • .select__content
  • .select__footer
  • .select__no-result
  • .select__options
  • .select__clear-btn
  • .select__close-btn
  • .select__close-mobile-btn
  • .select__label
  • .select__title

And following modifiers:

  • .select_disabled
  • .select_opened
  • .select_with-links
  • .select_error
  • .select_error__values
  • .select_error__placeholder
  • .select__content_error

The .select-toggler element contains the following sub elements:

  • .select-toggler__placeholder
  • .select-toggler__values

And following modifiers:

  • .select-toggler_selected

The .select-option element contains the following sub elements:

  • .select-option__content
  • .select-option__additional-content

And following modifiers:

  • .select-option_with-link

The .select-search element contains the following sub elements:

  • .select-search__input

Example

We also use the h-dropdown webcomponent for presentation purposes.

Basic select

<h-dropdown content-width="full" name="example" offset="2" direction="bottom-center">
    <h-dropdown-toggler class="dropdown__toggler" name="example" tabindex="0" role="button" aria-expanded="false">
        <h-select-toggler class="select-toggler" role="textbox" slot="toggler">
            <span class="select-toggler__placeholder">My select</span>
            <h-icon icon-name="icon-chevron-down">
                <svg class="icon">
                    <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-chevron-down"></use>
                </svg>
            </h-icon>
        </h-select-toggler>
    </h-dropdown-toggler>

    <h-portal hidden disabled to="dropdown-portal">
        <h-dropdown-content class="select__content dropdown__content" name="example" role="menu">
            <h-select-close-btn
                class="select__close-mobile-btn"
                role="menuitem"
                aria-label="close select"
                tabindex="0"
            >
                <h-icon icon-name="icon-x" size="l">
                    <svg class="icon icon_l ">
                        <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-x"></use>
                    </svg>
                </h-icon>
            </h-select-close-btn>

            <div class="select__label" role="menuitem">My select</div>

            <h-options role="menuitem" tabindex="0" class="select__options">
                <h-option class="select-option" value="1" tabindex="-1" role="option" disabled>
                    <h-option-content class="select-option__content">1 disabled</h-option-content>
                </h-option>
                <h-option class="select-option" value="2" tabindex="-1" role="option" hidden>
                    <h-option-content class="select-option__content">2</h-option-content>
                </h-option>
                <h-option class="select-option" value="3" tabindex="-1" role="option">
                    <h-option-content class="select-option__content">3</h-option-content>
                </h-option>
            </h-options>

            <div role="menuitem"></div>
        </h-dropdown-content>
    </h-portal>
</h-dropdown>

HTML
    <h-select class="select" control-name="example" control-id="1">
        <label class="select__title label" for="1">
            My select
        </label>    

        <h-dropdown content-width="full" name="example" offset="2" direction="bottom-center">
            <h-dropdown-toggler class="dropdown__toggler" name="example" tabindex="0" role="button" aria-expanded="false">
                <h-select-toggler class="select-toggler" role="textbox" slot="toggler">
                    <span class="select-toggler__placeholder">My select</span>
                    <h-icon icon-name="icon-chevron-down">
                        <svg class="icon">
                            <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-chevron-down"></use>
                        </svg>
                    </h-icon>
                </h-select-toggler>
            </h-dropdown-toggler>

            <h-portal hidden disabled to="dropdown-portal">
                <h-dropdown-content class="select__content dropdown__content" name="example" role="menu">
                    <h-select-close-btn
                        class="select__close-mobile-btn"
                        role="menuitem"
                        aria-label="close select"
                        tabindex="0"
                    >
                        <h-icon icon-name="icon-x" size="l">
                            <svg class="icon icon_l ">
                                <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-x"></use>
                            </svg>
                        </h-icon>
                    </h-select-close-btn>

                    <div class="select__label" role="menuitem">My select</div>

                    <h-options role="menuitem" tabindex="0" class="select__options">
                        <h-option class="select-option" value="1" tabindex="-1" role="option" disabled>
                            <h-option-content class="select-option__content">1 disabled</h-option-content>
                        </h-option>
                        <h-option class="select-option" value="2" tabindex="-1" role="option" hidden>
                            <h-option-content class="select-option__content">2</h-option-content>
                        </h-option>
                        <h-option class="select-option" value="3" tabindex="-1" role="option">
                            <h-option-content class="select-option__content">3</h-option-content>
                        </h-option>
                    </h-options>

                    <div role="menuitem"></div>
                </h-dropdown-content>
            </h-portal>
        </h-dropdown>
    </h-select>

LESS

You can modify any select less variable in your User Less section to change select styles.

Select variables

Variables used to style selects.

@selectColorPrimary: @neutralColors0;
@selectColorSecondary: @primaryColors500;
@selectColorTertiary: @neutralColors50;

@selectFontColorSecondary: @neutralColors0;

@selectOptionsListMaxHeightInPx: 296;

@selectFontSizeInPx: 14;
@selectLineHeightInPx: 20;
@selectWithSearchMinWidth: 120px;

@selectSelectedColor: @selectColorSecondary;

@selectDisabledBgColor: @neutralColors50;
@selectDisabledColor: @neutralColors500;
@selectDisabledBorderColor: @neutralColors50;

@selectWithLinksWidth: 200px;

@selectErrorColor: @controlErrorColor;
@selectErrorBorderColor: @controlErrorBorderColor;
@selectBoxShadowError: inset 0 0 0px 1px @selectErrorBorderColor;

@selectBtnPrimaryBgColor: @btnBgColorPrimary;
@selectBtnHoverPrimaryBgColor: @btnBgColorPrimaryHover;
@selectBtnPrimaryColor: @btnColorPrimary;

@selectBtnSecondaryBgColor: @btnBgColorSecondary;
@selectBtnHoverSecondaryBgColor: @btnBgColorPrimaryHover;
@selectBtnSecondaryColor: @btnColorSecondary;

@selectFocusBoxShadow: @inputBoxShadowFocus;
@selectFocusBorderColor: @selectSelectedColor;
@selectFocusBorderRadius: 2px 2px 0 0;

@selectContentBgColor: @selectColorPrimary;
@selectContentBorder: 1px solid @selectSelectedColor;
@selectContentBorderRadius: 0 0 2px 2px;
@selectContentPaddingAllInPx: 0;
@selectContentMobilePaddingTopInPx: 72;
@selectContentMobilePaddingBottomInPx: 24;

@selectFooterBorderTopColor: @neutralColors200;
@selectFooterBorderTop: 1px solid @selectFooterBorderTopColor;
@selectFooterPaddingHorizontalInPx: 16;
@selectFooterPaddingVerticalInPx: 8;
@selectFooterMobilePaddingTopInPx: 24;
@selectFooterMobilePaddingRightInPx: 24;
@selectFooterMobilePaddingLeftInPx: 0;
@selectFooterMobilePaddingBottomInPx: 0;

@selectCloseMobileBtnPaddingHorizontalInPx: 18;
@selectCloseMobileBtnPaddingVerticalInPx: 20;

@selectLabelPaddingHorizontal: 24;
@selectLabelPaddingVertical: 4;

@selectNoResultMobilePaddingTopInPx: 12;
@selectNoResultMobilePaddingRightInPx: 24;

@selectTitleFontSize: @selectFontSizeInPx;
@selectTitleLineHeight: @selectLineHeightInPx;
@selectTitleMarginBottom: 4;

Variables used to style select toggler elements.

@selectTogglerSelectedBorderColor: @selectSelectedColor;

@selectTogglerTagHeightInPx: 28;
@selectTogglerTagValuesGap: 6;
@selectTogglerTagValuesNumberOfRows: 3;

@selectTogglerLoadingHeight: 40;

@selectTogglerPaddingTopInPx: 6;
@selectTogglerPaddingBottomInPx: 6;
@selectTogglerPaddingRightInPx: 6.75;
@selectTogglerPaddingLeftInPx: 9;

@selectTogglerPlaceholderPaddingTopInPx: 10;
@selectTogglerPlaceholderPaddingRightInPx: @inputPaddingRightM;
@selectTogglerPlaceholderPaddingBottomInPx: 10;
@selectTogglerPlaceholderPaddingLeftInPx: @inputPaddingLeftM;

Variables used to style select option elements.

@selectOptionBgColor: @selectColorPrimary;
@selectOptionDisabledColor: @neutralColors700;

@selectOptionPaddingHorizontalInPx: 16;
@selectOptionPaddingVerticalInPx: 8;

@selectOptionFontSizeInPx: 14;
@selectOptionLineHeightInPx: 20;

@selectOptionSelectedColor: @selectSelectedColor;

@selectOptionHoverBgColor: @primaryColors50;
@selectOptionHoverColor: @globalFontColor;;

@selectOptionMobilePaddingHorizontalInPx: 24;
@selectOptionMobilePaddingVerticalInPx: 8;

@selectOptionWithLinkLinkColor: @globalFontColor;

Variables used to style select search elements.

@selectSearchBorderColor: @neutralColors200;
@selectSearchBorder: 1px solid @selectSearchBorderColor;
@selectSearchBoxShadow: 0 4px 3px -4px @selectSearchBorderColor;

@selectSearchPaddingTopInPx: 10;
@selectSearchPaddingRightInPx: 4;
@selectSearchPaddingBottomInPx: 10;
@selectSearchPaddingLeftInPx: 15;

@selectSearchFontSize: @selectFontSizeInPx;
@selectSearchLineHeight: @selectLineHeightInPx;
@selectSearchIconColor: @neutralColors500;

@selectSearchInputColor: @globalFontColor;

@selectSearchMobilePaddingLeftInPx: 23;

If you want to change select styles, you can just change the variables. To change default color just modify @selectColorPrimary variable.

@selectColorPrimary: red;

Select styles

Standard select styles.

.select {
    display: block;
    width: 100%;

    color: @globalFontColor;
    -webkit-text-fill-color: @globalFontColor;

    h-option {
        display: none;
    }

    h-dropdown-toggler {
        width: 100%;
    }

    &:not([multiple]) {
        .select-toggler__values {
            .padding-to-unit(@inputPaddingTopM, @inputPaddingRightM, @inputPaddingBottomM, @inputPaddingLeftM);
        }
    }

    &_with-search {
        min-width: @selectWithSearchMinWidth;
    }

    &_disabled {
        pointer-events: none;

        .select-toggler {
            background-color: @selectDisabledBgColor;
            border-color: @selectDisabledBorderColor;
            color: @selectDisabledColor;

            &__icon {
                stroke: @selectDisabledColor;
            }
        }
    }

    &_opened {
        .select-toggler {
            border-radius: @selectFocusBorderRadius;
            box-shadow: @selectFocusBoxShadow;
            border-color: @selectFocusBorderColor;

            &:hover {
                border-color: @selectFocusBorderColor;
            }
        }
    }

    &_with-links {
        width: @selectWithLinksWidth;
    }

    &__content {
        background-color: @selectContentBgColor;

        &.dropdown__content {
            border: @selectContentBorder;
            border-top: none;
            border-radius: @selectContentBorderRadius;

            padding: @selectContentPaddingAllInPx;
        }

        &_error {
            &.dropdown__content {
                border-color: @selectErrorBorderColor;
            }
        }
    }

    &__footer {
        display: flex;
        justify-content: flex-end;

        border-top: @selectFooterBorderTop;

        .pixel-to-rem(gap, 8);
        .padding-to-unit(@selectFooterPaddingVerticalInPx, @selectFooterPaddingHorizontalInPx, @selectFooterPaddingVerticalInPx, @selectFooterPaddingHorizontalInPx);

        .h-select-close-btn {
            display: block;
        }
    }

    &__no-result {
        margin-bottom: 0;

        .font-size(@selectFontSizeInPx);
        .line-height(@selectLineHeightInPx);

        .padding-to-unit(@selectFooterPaddingVerticalInPx, @selectFooterPaddingHorizontalInPx, @selectFooterPaddingVerticalInPx, @selectFooterPaddingHorizontalInPx);
    }

    &__options {
        overflow-y: auto;
        display: block;

        .custom-scrollbar();
        .pixel-to-rem(max-height, @selectOptionsListMaxHeightInPx);
    }

    &__clear-btn {
        .btn();

        .btn-decorate-appearance(@selectBtnSecondaryBgColor, @selectBtnSecondaryColor);
        .btn-decorate-size(@btnFontSizeInPxS, @btnPaddingTopS, @btnPaddingRightS, @btnPaddingBottomS, @btnPaddingLeftS, @lineHeightInPxS);

        &:hover {
            background-color: @selectBtnHoverPrimaryBgColor;
        }
    }

    &__close-btn {
        .btn();

        .btn-decorate-appearance(@selectBtnPrimaryBgColor, @selectBtnPrimaryColor);
        .btn-decorate-size(@btnFontSizeInPxS, @btnPaddingTopS, @btnPaddingRightS, @btnPaddingBottomS, @btnPaddingLeftS, @lineHeightInPxS);

        &:hover {
            background-color: @selectBtnHoverSecondaryBgColor;
        }
    }

    &__close-mobile-btn {
        display: none;
    }

    &__label {
        display: none;
    }

    &__title {
        display: block;

        .font-size(@selectTitleFontSize);
        .line-height(@selectTitleLineHeight);

        .pixel-to-rem(margin-bottom, @selectTitleMarginBottom);
    }

    &_error {
        .select-toggler {
            border-color: @selectErrorBorderColor;
            box-shadow: @selectBoxShadowError;

            &__values,
            &__placeholder {
                color: @selectErrorColor;
            }
        }
    }
}

@media screen and (max-width: @breakPointXs) {
    .select {
        &__content {
            &.dropdown__content {
                display: flex;
                flex-direction: column;
                border: none;
                z-index: 3;

                .pixel-to-rem(padding-top, @selectContentMobilePaddingTopInPx);
                .pixel-to-rem(padding-bottom, @selectContentMobilePaddingBottomInPx);
            }
        }

        &__options {
            max-height: unset;
            flex-basis: 100%;

            &_empty {
                flex-basis: 0;
            }
        }

        &__label {
            display: block;

            .padding-to-unit(@selectLabelPaddingVertical, @selectLabelPaddingHorizontal, @selectLabelPaddingVertical, @selectLabelPaddingHorizontal);
            .font-size(@selectFontSizeInPx);
            .line-height(@selectLineHeightInPx);
            .weight-semibold();

            .select-toggler__placeholder {
                padding: 0;
            }
        }

        &__no-result {
            .pixel-to-rem(padding-top, @selectNoResultMobilePaddingTopInPx);
            .pixel-to-rem(padding-left, @selectNoResultMobilePaddingRightInPx);
        }

        &__footer {
            border: none;

            .padding-to-unit(@selectFooterMobilePaddingTopInPx, @selectFooterMobilePaddingRightInPx, @selectFooterMobilePaddingBottomInPx, @selectFooterMobilePaddingLeftInPx);
        }

        &__close-mobile-btn {
            display: block;
            position: absolute;
            top: 0;
            right: 0;

            .padding-to-unit(@selectCloseMobileBtnPaddingVerticalInPx, @selectCloseMobileBtnPaddingHorizontalInPx, @selectCloseMobileBtnPaddingVerticalInPx, @selectCloseMobileBtnPaddingHorizontalInPx);
        }
    }
}

Standard select toggler styles.

.select-toggler {
    .input();

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0;

    .pixel-to-rem(padding-right, 12);

    &:empty {
        .pixel-to-rem(height, @selectTogglerLoadingHeight);
    }

    &_selected {
        border-color: @selectTogglerSelectedBorderColor;
    }

    &__placeholder {
        flex-basis: 100%;
        .padding-to-unit(@selectTogglerPlaceholderPaddingTopInPx, @selectTogglerPlaceholderPaddingRightInPx, @selectTogglerPlaceholderPaddingBottomInPx, @selectTogglerPlaceholderPaddingLeftInPx);
        white-space: nowrap;
        overflow: hidden;
    }

    &__values {
        display: flex;
        flex-wrap: wrap;
        flex-basis: 100%;

        overflow-y: auto;

        .pixel-to-rem(max-height, @selectTogglerTagHeightInPx * @selectTogglerTagValuesNumberOfRows + 2 * @selectTogglerTagValuesGap + 2 * @selectTogglerPaddingTopInPx);
        .custom-scrollbar();
        .pixel-to-rem(gap, @selectTogglerTagValuesGap);
        .padding-to-unit(@selectTogglerPaddingTopInPx, @selectTogglerPaddingRightInPx, @selectTogglerPaddingBottomInPx, @selectTogglerPaddingLeftInPx);
    }
}

Standard select option styles.

.select-option {
    display: flex;
    justify-content: space-between;

    .padding-to-unit(@selectOptionPaddingVerticalInPx, @selectOptionPaddingHorizontalInPx, @selectOptionPaddingVerticalInPx, @selectOptionPaddingHorizontalInPx);

    .font-size(@selectOptionFontSizeInPx);
    .line-height(@selectOptionLineHeightInPx);

    &[selected] {
        .weight-semibold();

        color: @selectOptionSelectedColor;

        .icon {
            stroke: @selectOptionSelectedColor;
            .pixel-to-rem(margin-left, 8);
        }
    }

    &[disabled] {
        color: @selectOptionDisabledColor;

        &:not([clickable]):hover {
            cursor: not-allowed;
            background-color: @selectOptionBgColor;

            .select-option__content {
                color: @selectOptionDisabledColor;
            }
        }
    }

    &:hover {
        background-color: @selectOptionHoverBgColor;
        cursor: pointer;
    }

    &__content {
        display: block;
        flex-basis: 100%;
    }

    &__additional-content {
        flex-basis: 50%;
        text-align: right;
    }

    &_with-link {
        padding: 0;

        .select-option__content {
            .select-option__link {
                display: block;

                width: 100%;
                .padding-to-unit(@selectOptionPaddingVerticalInPx, @selectOptionPaddingHorizontalInPx, @selectOptionPaddingVerticalInPx, @selectOptionPaddingHorizontalInPx);

                color: @selectOptionWithLinkLinkColor;
                text-decoration: none;

                &:hover {
                    color: @selectOptionHoverColor;
                }

                &_active {
                    .weight-semibold();

                    color: @selectOptionSelectedColor;

                    &:hover {
                        color: @selectOptionSelectedColor;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: @breakPointXs) {
    .select-option {
        .padding-to-unit(@selectOptionMobilePaddingVerticalInPx, @selectOptionMobilePaddingHorizontalInPx, @selectOptionMobilePaddingVerticalInPx, @selectOptionMobilePaddingHorizontalInPx);
    }
}

Standard select search styles.

.select-search {
    display: flex;
    align-items: center;
    min-width: @selectWithSearchMinWidth;

    border-bottom: @selectSearchBorder;
    border-top: @selectSearchBorder;
    box-shadow: @selectSearchBoxShadow;

    .pixel-to-rem(gap, 11);
    .padding-to-unit(@selectSearchPaddingTopInPx, @selectSearchPaddingRightInPx, @selectSearchPaddingBottomInPx, @selectSearchPaddingLeftInPx);

    &__input {
        color: @selectSearchInputColor;

        width: 100%;
        flex-basis: 100%;
        outline: none;

        .font-size(@selectSearchFontSize);
        .line-height(@selectSearchLineHeight);
    }

    .icon {
        stroke: @selectSearchIconColor;
    }
}

@media screen and (max-width: @breakPointXs) {
    .select-search {
        .pixel-to-rem(padding-left, @selectSearchMobilePaddingLeftInPx);
    }
}

Webcomponents reference