{"id":6293,"date":"2025-07-01T14:37:38","date_gmt":"2025-07-01T19:37:38","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=6293"},"modified":"2025-07-01T14:37:39","modified_gmt":"2025-07-01T19:37:39","slug":"custom-select-that-comes-up-from-the-bottom-on-mobile","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/custom-select-that-comes-up-from-the-bottom-on-mobile\/","title":{"rendered":"Custom Select (that comes up from the bottom on mobile)"},"content":{"rendered":"\n

Custom <select><\/code> menus are a thing now<\/a>, especially because they can be progressively enhanced into. Una has some great examples<\/a>. <\/p>\n\n\n\n

\"Screenshot
Demo<\/a>, which falls back to entirely default styling.<\/figcaption><\/figure>\n\n\n\n

I was recently at CSS Day<\/a> and got to see Brecht De Ruyte<\/a> do a whole talk on it. He’s also go a three<\/s>four-part series on it (starting here<\/a>). My brain was full of CSS stuff while there, I had a weird hankering to work on a custom select that combined a bunch of it. I roped Brecht into collabing on my idea.<\/p>\n\n\n\n

See, we were on the heals of the whole liquid glass thing from Apple<\/a> and it seemed fun to make the selects kinda glassy with borders and blur. I also wanted to if animating the select in<\/em> was possible (and maybe stagger them in?!). Plus, I was reminiscing about the original weird iOS select UI<\/a> where it had a special UI that came up from the bottom. Is that maybe… better?<\/em> for thumb-reach? So let’s try that.<\/p>\n\n\n\n

The Base<\/h2>\n\n\n\n

I like Brecht’s snippet that sets the stage nicely:<\/p>\n\n\n

select<\/span> {\n  appearance<\/span>: none;\n  @supports (appearance<\/span>: base-select) {\n    &,\n    &::picker<\/span>(select) {\n      appearance: base-select;\n    }\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
That’s saying:<\/p>\n\n\n\n
    \n
  1. We’re going to wipe out the base styling anyway. Even browsers that don’t support the entire suite of custom styles for selects support styling the basic element itself, just not the “picker” part.<\/li>\n\n\n\n
  2. In browsers that support it, we need to set appearance: base-select;<\/code> to opt-in to the custom styleabtlity, and we need to do it both on the select itself and the picker, which uses this newfangled pseudo element.<\/li>\n<\/ol>\n\n\n\n
    Minor aside: it’s interesting that the appearance<\/code> value is base-select<\/code> for now. In the hopefully-not-too-distant future, we’ll be opt-in “resetting” not just selects but all the form elements with appearance: base<\/code>.<\/a> But I guess that isn’t far enough along and may have been a slightly dangerous breaking change scenario, so it’s isolated to base-select<\/code> for now. So be it.<\/p>\n\n\n\n
    The Glassy Look<\/h2>\n\n\n\n
    We’ve got the ability now to style the select<\/code> directly and a good amount of lienency to style it however we want. Here, a blurry background is applied and the dropdown arrow is applied with a background SVG. (This is Brecht’s cool idea and implementation, as a reminder.)<\/p>\n\n\n
    select<\/span> {\n  display<\/span>: flex;\n  justify-content<\/span>: space-between;\n  min-width<\/span>: 300px<\/span>;\n  align-items<\/span>: center;\n  color<\/span>: white;\n  padding-block<\/span>: 10px<\/span>;\n  padding-inline<\/span>: 10px<\/span> 30px<\/span>;\n  border<\/span>: 0<\/span>;\n  border-radius<\/span>: 5px<\/span>;\n  cursor<\/span>: pointer;\n  font-weight<\/span>: 700<\/span>;\n  backdrop-filter<\/span>: blur<\/span>(5px<\/span>);\n  background<\/span>: oklch<\/span>(0.4764<\/span> 0.2094<\/span> 259.13<\/span> \/ 0.3<\/span>)\n    url<\/span>(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23FFF' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' \/%3E%3C\/svg%3E%0A\"<\/span>)\n    right 10px<\/span> center \/ 20px<\/span> no-repeat;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    Even in Firefox, which doesn’t support appearance: base-select<\/code>, we’ve got the look we’re after:<\/p>\n\n\n
    \n
    \"Custom<\/figure>\n<\/div>\n\n\n
    We have no ability to style the picker in Firefox or Safari (yet!) but that’s totally fine. <\/em>We just get the default experience:<\/p>\n\n\n
    \n
    \"A<\/figure>\n<\/div>\n\n\n
    Our goal is to change up this experience on small screens, so it’s a little unfortunate this stuff isn’t in iOS yet (it is in Android!) but again, we just get the default experience which is fine:<\/p>\n\n\n
    \n
    \"A<\/figure>\n<\/div>\n\n\n
    The Picker Icon<\/h2>\n\n\n\n
    We can start playing with, in a progressive enhancement friendly way, styling the custom “picker” now. Let’s do the icon first.<\/p>\n\n\n
    select<\/span> {\n  ...\n\n  @supports (appearance<\/span>: base-select) {\n    background: oklch<\/span>(0.4764<\/span> 0.2094<\/span> 259.13<\/span> \/ 0.3<\/span>);\n\n    &:focus,\n    &:hover {\n      background-color<\/span>: oklch<\/span>(0.4764<\/span> 0.2094<\/span> 259.13<\/span> \/ 0.6<\/span>);\n    }\n    \n    &::picker-icon<\/span> {\n      content<\/span>: \"\"<\/span>;\n      width<\/span>: 20px<\/span>;\n      height<\/span>: 20px<\/span>;\n      background-image<\/span>: url<\/span>(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23FFF' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' \/%3E%3C\/svg%3E%0A\"<\/span>);\n      transition<\/span>: rotate 0.2s<\/span> ease-out;\n    }\n\n    &:open<\/span>::picker-icon<\/span> {\n      rotate<\/span>: 180deg<\/span>;\n    }\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    When the browser supports it, we’ll rip off the SVG background we were using for the dropdown arrow and apply it as the ::picker-icon<\/code> instead. That alone isn’t terribly useful, but now because we can target it individually, we can animate a rotation on it. That’s nice.<\/p>\n\n\n\n\t\t
    \n\t\t\t