Votre navigateur ne supporte pas cette démonstration
Si la démonstration ne fonctionne pas, activez la fonctionnalité : #enable-experimental-web-platform-features via le drapeau chrome://flags.
<selectlist>
<button type=selectlist>
<selectedoption></selectedoption>
</button>
<listbox popover>
<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>
</listbox>
</selectlist>
*{box-sizing: border-box}
[popover] {
scale:calc(1 - var(--a));
opacity: calc(1 - var(--a));
transform-origin:top center;
}
@starting-style {
[popover],
option {
--a: 1;
}
}
selectlist{
width:100%;
max-width:300px;
display: flex;
align-items:center;
}
selectlist 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;
}
listbox {
margin-top:1rem;
inset-area: bottom;/*position-area*/
position-try: flip-block;
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 .25s; }
option{transition: scale .25s var(--delai), opacity .25s var(--delai);}
}