Modern CSS Demos

Loading ...

:root {
    --position-end: right;
}

[dir="rtl"] {
    --position-end: left;
}

select {
    --select-fontsize: 1rem;
    --select-color: light-dark(#313131, #fafafa);
    --select-background-color: light-dark(#fafafa, #313131);
    --select-border-width: .0625rem;
    --select-border-radius: .375rem;
    --select-border-color: color-mix(in srgb, var(--select-background-color), var(--select-color) 20%);
    --select-hover-border-color: color-mix(in srgb, var(--select-background-color), var(--select-color) 30%);
    --select-focus-border-color: light-dark(#689f38, #9ccc65);
    --select-padding-x: .75rem;
    --select-padding-y: .5rem;
    --select-option-gap: .5rem;
    --select-option-checked-background-color: light-dark(#cddebe, #596050);
    --select-icon-size: 1em;
    --select-animation: cubic-bezier(0.19, 1, 0.22, 1);
    --select-picker-padding: .125rem;
    --select-picker-shadow:
        0 1px 2px light-dark(rgba(0, 0, 0, .04), rgba(0, 0, 0, .25)),
        0 1px 2px light-dark(rgba(0, 0, 0, .08), rgba(0, 0, 0, .35));

&:hover {
        border-color: var(--select-hover-border-color);
    }

&:focus-visible,
    &:focus {
        border-color: var(--select-focus-border-color);
        outline: 0;
    }
}

/* System */
.select-system {
    width: 100%;
}

/* Classic */
.select-classic {
    appearance: none;
    font-size: var(--select-fontsize);
    color: var(--select-color);
    background-color: var(--select-background-color);
    border-radius: var(--select-border-radius);
    border: var(--select-border-width) solid var(--select-border-color);
    padding: var(--select-padding-y) var(--select-padding-x);
    width: 100%;
    padding-inline-end: calc(var(--select-padding-x) * 2 + var(--select-icon-size));
    background-clip: padding-box;
    background-size: var(--select-icon-size);
    background-repeat: no-repeat;
    background-position: var(--position-end) var(--select-padding-x) top 50%;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cg fill='gray'%3e%3cpath d='M10.852 9.06 8 11.91 5.166 9.077l-.707.707L8 13.325l3.559-3.559zM11.515 6.19 8 2.675 4.468 6.207l.707.707L8 4.09l2.808 2.808z'/%3e%3c/g%3e%3c/svg%3e");
}

/* Modern */
.select-modern {
    appearance: none;
    background-clip: padding-box;
    background-size: var(--select-icon-size);
    background-repeat: no-repeat;
    background-position: var(--position-end) var(--select-padding-x) top 50%;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cg fill='gray'%3e%3cpath d='M10.852 9.06 8 11.91 5.166 9.077l-.707.707L8 13.325l3.559-3.559zM11.515 6.19 8 2.675 4.468 6.207l.707.707L8 4.09l2.808 2.808z'/%3e%3c/g%3e%3c/svg%3e");
    padding-inline-end: calc(var(--select-padding-x) * 2 + var(--select-icon-size));

/* Opt-In */
    @supports (appearance: base-select) {
        & {
            background-image: none;
            padding-inline-end: var(--select-padding-x);
        }

&,
        &::picker(select) {
            appearance: base-select;
        }
    }
}

.select-modern {
    font-size: var(--select-fontsize);
    color: var(--select-color);
    background-color: var(--select-background-color);
    border-radius: var(--select-border-radius);
    border: var(--select-border-width) solid var(--select-border-color);
    padding: var(--select-padding-y) var(--select-padding-x);
    width: 100%;

&::picker(select) {
        background-color: var(--select-background-color);
        border-radius: var(--select-border-radius);
        border: var(--select-border-width) solid var(--select-border-color);
        padding: var(--select-picker-padding);
        margin: .125rem 0;
        scrollbar-color: color-mix(in srgb, var(--select-background-color), var(--select-color)) transparent;
        box-shadow: var(--select-picker-shadow);
    }

&::picker-icon {
        display: none;
    }

button {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: var(--select-option-gap);

.select-modern-button-chevron {
            display: inline-block;
            height: var(--select-icon-size);
            width: var(--select-icon-size);
            fill: currentColor;
        }
    }

selectedcontent {
        display: flex;
        overflow: hidden;
        white-space: nowrap;
        align-items: center;
        gap: var(--select-option-gap);
    }

div > label {
        display: flex;
        font-size: .75em;
        text-transform: uppercase;
        align-items: center;
        gap: var(--select-option-gap);
        color: color-mix(in srgb, var(--select-background-color), var(--select-color));
        padding: var(--select-padding-y) calc(var(--select-padding-x) - var(--select-picker-padding));
        margin: 0;
    }

option {
        display: flex;
        align-items: center;
        gap: var(--select-option-gap);
        padding: var(--select-padding-y) calc(var(--select-padding-x) - var(--select-picker-padding));
        border-radius: calc(var(--select-border-radius) - var(--select-picker-padding));
        margin: 0;

&:focus,
        &:focus-visible {
            outline-offset: calc(var(--select-border-width) * -1);
            outline-width: var(--select-border-width);
            outline-style: solid;
            outline-color: color-mix(in srgb, var(--select-option-checked-background-color), var(--select-color));
        }

&:checked {
            background-color: var(--select-option-checked-background-color);
        }

&::checkmark {
            display: inline-block;
            height: var(--select-icon-size);
            width: var(--select-icon-size);
            order: 1;
            flex-grow: 0;
            flex-shrink: 0;
            content: "";
            background-color: currentColor;
            mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cg fill='%23fff'%3e%3cpath d='m13.3 4.8-.7-.7c-.2-.2-.5-.2-.7 0L6.5 9.5 4 6.9c-.2-.2-.5-.2-.7 0l-.6.7c-.2.2-.2.5 0 .7l3.6 3.6c.2.2.5.2.7 0l6.4-6.4c.1-.2.1-.5-.1-.7z'/%3e%3c/g%3e%3c/svg%3e");
        }

& + option {
            margin-block-start: .0625rem;
        }
    }

.select-modern-option-icon {
        flex-grow: 0;
        flex-shrink: 0;
        display: inline-block;
        height: var(--select-icon-size);
        width: var(--select-icon-size);
    }

.select-modern-option-label {
        flex-grow: 1;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Style Backdrop */
.select-modern {
    &::picker(select)::backdrop {
        background-color: var(--demo-bg);
        opacity: .75;
    }
}

/* Anchor Positioing */
/* .select-modern {
    &::picker(select) {
        top: anchor(center);
        left: anchor(center);
        translate: -50% -50%;
    }
} */

/* Starting Style Animation */
.select-modern {
    &::picker(select) {
        opacity: 0;
        transition: opacity .35s allow-discrete;
    }

&::picker(select):popover-open {
        opacity: 1;
    }
}

@starting-style {
  .select-modern::picker(select):popover-open {
    opacity: 0;
  }
}

/* Transition when option is selected */
.select-modern selectedcontent > * {
    transition:
        transform .7s var(--select-animation),
        display .7s allow-discrete,
        opacity .7s;
    opacity: 1;

@starting-style {
        opacity: 0;
        transform: translateY(1rem);
    }
}

<label for="select-system">System Select</label>
            <select id="select-system" name="select-system" class="select-system">
                                <optgroup label="Page">
                                        <option value="1">Standard</option>
                                        <option value="6">Backend User Section</option>
                                    </optgroup>
                                <optgroup label="Link">
                                        <option value="4">Shortcut</option>
                                        <option value="7">Mount Point</option>
                                        <option value="3">Link to External Url</option>
                                    </optgroup>
                                <optgroup label="Special">
                                        <option value="254">Folder</option>
                                        <option value="199">Menu Separator</option>
                                    </optgroup>
                            </select>

</div>
        <div class="grid-item">

<label for="select-classic">Classic Select</label>
            <select id="select-classic" name="select-classic" class="select-classic">
                                <optgroup label="Page">
                                        <option value="1">Standard</option>
                                        <option value="6">Backend User Section</option>
                                    </optgroup>
                                <optgroup label="Link">
                                        <option value="4">Shortcut</option>
                                        <option value="7">Mount Point</option>
                                        <option value="3">Link to External Url</option>
                                    </optgroup>
                                <optgroup label="Special">
                                        <option value="254">Folder</option>
                                        <option value="199">Menu Separator</option>
                                    </optgroup>
                            </select>

</div>
        <div class="grid-item">

<label for="select-modern">Modern Select</label>
            <select id="select-modern" name="select-modern" class="select-modern">
                <button class="select-modern-button">
                    <selectedcontent></selectedcontent>
                    <svg class="select-modern-button-chevron" role="img" aria-hidden="true">
                        <use href="/assets/actions.svg#actions-chevron-expand" />
                    </svg>
                </button>
                                <div role="group">
                    <label>Page</label>
                                        <option value="1">
                                                <svg class="select-modern-option-icon" role="img" aria-hidden="true">
                            <use href="/assets/apps.svg#apps-pagetree-page-default" />
                        </svg>
                                                <span class="select-modern-option-label">Standard</span>
                    </option>
                                        <option value="6">
                                                <svg class="select-modern-option-icon" role="img" aria-hidden="true">
                            <use href="/assets/apps.svg#apps-pagetree-page-backend-users" />
                        </svg>
                                                <span class="select-modern-option-label">Backend User Section</span>
                    </option>
                                    </div>
                                <div role="group">
                    <label>Link</label>
                                        <option value="4">
                                                <svg class="select-modern-option-icon" role="img" aria-hidden="true">
                            <use href="/assets/apps.svg#apps-pagetree-page-shortcut" />
                        </svg>
                                                <span class="select-modern-option-label">Shortcut</span>
                    </option>
                                        <option value="7">
                                                <svg class="select-modern-option-icon" role="img" aria-hidden="true">
                            <use href="/assets/apps.svg#apps-pagetree-page-mountpoint" />
                        </svg>
                                                <span class="select-modern-option-label">Mount Point</span>
                    </option>
                                        <option value="3">
                                                <svg class="select-modern-option-icon" role="img" aria-hidden="true">
                            <use href="/assets/apps.svg#apps-pagetree-page-shortcut-external" />
                        </svg>
                                                <span class="select-modern-option-label">Link to External Url</span>
                    </option>
                                    </div>
                                <div role="group">
                    <label>Special</label>
                                        <option value="254">
                                                <svg class="select-modern-option-icon" role="img" aria-hidden="true">
                            <use href="/assets/apps.svg#apps-pagetree-folder-default" />
                        </svg>
                                                <span class="select-modern-option-label">Folder</span>
                    </option>
                                        <option value="199">
                                                <svg class="select-modern-option-icon" role="img" aria-hidden="true">
                            <use href="/assets/apps.svg#apps-pagetree-spacer" />
                        </svg>
                                                <span class="select-modern-option-label">Menu Separator</span>
                    </option>
                                    </div>
                            </select>

</div>
    </div>
</div>

Zoom

Document

Container