Aller au contenu principal
Guillaume Duverger Code & graphisme

Selectmenu Selectlist CSS popover/anchor API

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-try-options: 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);}
	
}