Selectmenu Selectlist select 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.

Les API popover et Anchor positioning sont désormais intégrés à l'élément select.

<select>	

<button>
<div>
<selectedcontent></selectedcontent>
<svg viewBox="0 0 24 24"><path d="M5.70711 9.71069C5.31658 10.1012 5.31658 10.7344 5.70711 11.1249L10.5993 16.0123C11.3805 16.7927 12.6463 16.7924 13.4271 16.0117L18.3174 11.1213C18.708 10.7308 18.708 10.0976 18.3174 9.70708C17.9269 9.31655 17.2937 9.31655 16.9032 9.70708L12.7176 13.8927C12.3271 14.2833 11.6939 14.2832 11.3034 13.8927L7.12132 9.71069C6.7308 9.32016 6.09763 9.32016 5.70711 9.71069Z"/></svg>
</div>
</button>

<div>
<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>

</select>

*{box-sizing: border-box}

:where(select){all:unset;}	
	
select,::picker(select) {
	
  appearance: base-select;/*pour mettre en place l'api*/
	
}
	
::picker(select),
option{
	
scale:calc(1 - var(--a));
opacity: calc(1 - var(--a));
	
	}
	
::picker(select) {
	
background-color: #fbfbff;
border-radius:10px;
border-width: 0;
margin: .5rem 0;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.2);  
}
	
::picker-icon {
   display: none;/* pour enlever la fleche d'origine dans le select*/
  }
    
select{

justify-self:center;
width:100%;
max-width:300px;
display: flex;
align-items:center;

}


	
select button div {  
 
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
font-size: clamp(1rem, round(down, 1rem + .125vi, 2px), 1.125rem);
background-color: #d5d7fc;
flex: 1;
color: #1e1e39;
padding: 10px;
border-radius: 50px;
border: 1px solid;
cursor: pointer;
	}	
	
	
select button div svg {
	
fill:currentcolor;
flex: 0 0 2cap;
width: 2cap;
height: 2cap;

	
	}	
	
:open > button svg {
	
rotate:.5turn;
  
	}
	

	
option{
display: flex;
align-items: center;
gap:.5rem;
padding: .5rem 1rem;
cursor: pointer;
--delai:calc(var(--b) * 125ms);
transform-origin: top left;

	}
	
	
option::checkmark{   display: none;}
	
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:is(:focus, :hover) {
    
background-color: #d5d7fc;

  }	
	
option:checked{background-color:#aaaefc;}
	
option:is(:checked)::after{
background:#4146a3;
flex:1;
content: "";
height:24px;
aspect-ratio: 1;
mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 9L9.99998 16L6.99994 13' fill='none' stroke='black' stroke-width='1.2'%3E%3C/path%3E%3C/svg%3E")  no-repeat right .25rem center/2rem	

	
	}

	
@media (prefers-reduced-motion: no-preference) {
	
::picker(select) { transition: all .25s allow-discrete }
option{transition: scale  .25s var(--delai), opacity  .25s var(--delai);}
select button div svg {transition: rotate .25s }		
}

	
@starting-style {

:open::picker(select),
option {--a: 1;}

  }