@siberiaweb/components/lib/example-styles/select.css

Веб-компоненты.

/*
    Поле выбора.

    Требуется <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
 */
.sw-select {
    --sw-select_dropdown-list-transition-duration: 0.15s;
    font-size: 14px;
    font-weight: normal;
}

.sw-select .sw-dropdown-list {
    border: 1px solid #bbbbbb;
    left: -1px;
    opacity: 0;
    right: -1px;
    transform: scaleY( 0 );
    transition: transform linear var( --sw-select_dropdown-list-transition-duration ),
        opacity linear var( --sw-select_dropdown-list-transition-duration );
}

.sw-select .sw-dropdown-list[ empty ]::after {
    background-color: white;
    color: #999999;
    display: block;
    content: "Нет данных";
    font-size: 13px;
    padding: 6px 12px;
}

.sw-select .sw-dropdown-list_item {
    background-color: white;
    cursor: default;
    padding-left: 6px;
}

.sw-select .sw-dropdown-list_group-role {
    color: brown;
    font-size: 12px;
    font-weight: bold;
}

.sw-select .sw-dropdown-list_grouped-item {
    padding-left: 12px;
}

.sw-select .sw-dropdown-list_selected-item {
    background-color: steelblue;
    color: white;
}

.sw-select[ focused ] .sw-dropdown-list {
    border-color: cornflowerblue;
}

.sw-select[ list-opened ] .sw-dropdown-list {
    opacity: 1;
    transform: scaleY( 1 );
}

.sw-select[ list-above ] .sw-dropdown-list {
    border-bottom: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    bottom: 100%;
    transform-origin: 0 100%;
}

.sw-select[ list-below ] .sw-dropdown-list {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top: none;
    top: 100%;
    transform-origin: 0 0;
}

.sw-select .sw-input_inline-input {
    transition: border-radius;
    transition-delay: var( --sw-select_dropdown-list-transition-duration );
}

.sw-select[ list-opened ] .sw-input_inline-input {
    transition-delay: 0s;
}

.sw-select[ list-opened ][ list-above ] .sw-input_inline-input {
    border-top-color: transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.sw-select[ list-opened ][ list-above ] .sw-input_inline-input::after {
    border-bottom: 1px solid #eeeeee;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.sw-select[ list-opened ][ list-above ][ focused ] .sw-input_inline-input label,
.sw-select[ list-opened ][ list-above ][ text-entered ] .sw-input_inline-input label {
    display: none;
}

.sw-select[ list-opened ][ list-below ] .sw-input_inline-input {
    border-bottom-color: transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.sw-select[ list-opened ][ list-below ] .sw-input_inline-input::after {
    border-top: 1px solid #eeeeee;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    top: calc( 100% - 1px );
}

.sw-select .sw-select_clear-icon {
    border-radius: 100%;
    transition: background-color linear 0.15s;
}

.sw-select .sw-select_clear-icon::after {
    content: "clear";
    font-family: "Material Icons", sans-serif;
    font-size: 18px;
    font-weight: normal;
}

.sw-select:not( [ disabled ] ) .sw-select_clear-icon:hover {
    background-color: #eeeeee;
}

.sw-select:not( [ disabled ] ) .sw-select_clear-icon:active {
    background-color: #dddddd;
}

.sw-select .sw-select_dropdown-icon::after {
    content: "expand_more";
    font-family: "Material Icons", sans-serif;
    font-size: 24px;
    font-weight: normal;
    transition: transform linear var( --sw-select_dropdown-list-transition-duration );
}

.sw-select[ list-opened ] .sw-select_dropdown-icon::after {
    transform: rotateX( 180deg );
}

.sw-select[ filter-disabled ] .sw-input_inline-input input {
    cursor: default;
}