score:3

Accepted answer

this is just a "masked" <select> tag. the scrolling is built-in to browsers and will happen when the number of options exceeds the height of the viewport.

there are multiple ways of making custom-designed dropdowns, including a fully custom solution, but the easiest way, and the way that amazon is doing it is by overlaying an element on top of a <select> tag with pointer-events disabled so your click passes through to trigger the <select> tag's native dropdown implementation.

from there you can store the <select> tag's value with onchange and usestate and then tie the "all" text in the overlay to that state variable.

here's an example of the css:

label {
  position:relative;
  display:block;
  width:max-content;
}

span {
  display:block;
  pointer-events:none;
  background:yellow;
  border-top-left-radius:20px;
  border-bottom-left-radius:20px;
  position:relative;
  z-index:1;
  padding:.25em 1.75em .25em 1em;
}

span::after {
  content:"";
  position:absolute;
  top:50%;
  right:10px;
  transform:translatey(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #000000 transparent transparent transparent;
}

select {
  cursor:pointer;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:red;
  opacity:0;
}
<label class="select-wrapper">
  <span>🎨 all</span>
  <select>
    <option>red</option>
    <option>green</option>
    <option>blue</option>
  </select>
</label>


Related Query

More Query from same tag