Votre navigateur ne supporte pas cette démonstration
<selectmenu>
<button slot="button" behavior="button">
<span behavior="selected-value" slot="selected-value"></span>
</button>
<div slot="listbox" popover behavior=listbox>
<option value="Option 1">
Option 1
</option>
<option value="Option 2">
Option 2
</option>
<option value="Option 3">
Option 3
</option>
<option value="Option 4">
Option 4
</option>
<option value="Option 5">
Option 5
</option>
</div>
</selectmenu>
*{box-sizing: border-box}
[popover] {
top: calc(anchor(bottom) + .5rem);
left: anchor(left);
scale:calc(1 - var(--a));/* 1 - 1 = 0*/
opacity: calc(1 - var(--a));/* 1 - 1 = 0*/
transform-origin:top center;
}
@position-fallback --top {
@try {
top: calc(anchor(bottom) + .5rem);
}
}
@starting-style {
[popover],option {
--a: 1;/*initialise*/
}
}
selectmenu {
width:100%;
max-width:300px;
display: flex;
align-items:center;
}
[behavior="button"] {
font-size: var(--font-size-base);
background:#6753ea url("data:image/svg+xml,%3Csvg width='1rem' height='1rem' viewBox='0 0 25 25' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5 15.5L12.5 19.5L8.5 15.5M8.5 9.5L12.5 5.5L16.5 9.5' fill='white' stroke='white' stroke-width='1.2'%3E%3C/path%3E%3C/svg%3E") no-repeat right .25rem center/1.5rem;
min-width: 100%;
color: white;
padding: 10px;
border-radius: 5px;
border: 1px solid #5f49e9;
cursor: pointer;
}
[behavior="button"]:hover {
background-color:#8f81ea;
}
[behavior="selected-value"] {
font-weight: 600
}
[behavior="listbox"] {
position-fallback: --top;
padding:0;
border: 2px solid #6753ea;
background: white;
border-radius: 5px;
}
option {
padding: 10px;
cursor: pointer;
display:flex;
scale:calc(1 - var(--a));
opacity:calc(1 - var(--a));
--delai:calc(var(--b) * 125ms);
transform-origin: top left
}
option:nth-child(1){--b:1}
option:nth-child(2){--b:2}
option:nth-child(3){--b:3}
option:nth-child(4){--b:4}
option:nth-child(5){--b:5}
option:not(:first-child) {
border-top: 1px solid #6753ea;
}
option:is(:hover, :focus) {
background-color: #ded9ff;
color:#333
}
@media (prefers-reduced-motion: no-preference) {
[popover] { transition: all .4s; }
option{transition: scale .25s var(--delai), opacity .25s var(--delai);}
}