{
  "$type": "site.standard.document",
  "description": "You're going to want this code when you go to kickoff customizing select elements.",
  "path": "/custom-select-with-transitions-boilerplate",
  "publishedAt": "2024-09-19T17:41:25.237Z",
  "site": "at://did:plc:jnj7wcwuvspxdsipmecmx7rs/site.standard.publication/self",
  "tags": [
    "blog",
    "css"
  ],
  "textContent": "Sharing this here because it's an important starting place for working with \" customizable selects .\" The Boilerplate # The first step is to give the select and it's picker appearance: base-select , which signals that you intend to build up a select from a set of base styles. Then enable transitions on the ::picker popover. Lastly, hook into the :open pseudo class and provide the enter and exit stage animations. select { &, & : :picker(select ) { appearance : base-select ; } &::picker( select ) { transition : display allow-discrete 1 s , opacity 1 s , overlay 1 s allow-discrete ; } & :not (:open)::picker( select ) { opacity : 0 ; } &:open::picker( select ) { opacity : 1 ; @ starting-style { opacity : 0 ; } } } Where & How to try it # Try it on Codepen : With Canary Enable web experiments See the Pen by Adam Argyle ( @argyleink ) on CodePen . What can I do with this? # Glad you asked! Here's the Codepen for the demo video at the beginning of this post: See the Pen by Adam Argyle ( @argyleink ) on CodePen .",
  "title": "Custom <select> boilerplate + transitions"
}