<label for="sort-select">Sorted by:</label>

<select name="sorts" id="sort-select">
  <button>
    <selectedoption></selectedoption>
    <span class="arrow"></span>
  </button>
  <option value="relevance">Most relevant</option>
  <option value="featured">Featured</option>
  <option value="price-l-h">Price (low to high)</option>
  <option value="price-h-l">Price (high to low)</option>
  <option value="bestseller">Bestsellers</option>
  <option value="ratings">Highest rated</option>
</select>

/* enter custom mode */
select,
::picker(select) {
  appearance: base-select;
}

/* style the button */
button {
  background: gold;
  font-family: fantasy;
  font-size: 1.2rem;
}

/* style the arrow, (CSS triangle) */
button span {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 0.3rem solid transparent;
  border-right: 0.3rem solid transparent;
  border-top: 0.3rem solid;
  translate: 0 -0.1em;
  transition: rotate 0.2s;
}

/* style the arrow when the picker is open */
select:open button span {
  rotate: -180deg;
}

/* style the picker dropdown */
::picker(select) {
  border-radius: 1rem;
}

/* style the options */
option {
  font-family: monospace;
  padding: 0.5rem 1rem 0.5rem 0;
  font-size: 1.2rem;
}

/* style selected option in the dropdown */
option:checked {
  background: powderblue;
}

/* style the option on hover or focus */
option:hover,
option:focus-visible {
  background-color: pink;
}

/* style the active option indicator */
option::before {
  content: '🩷';
  font-size: 80%;
  margin: 0.5rem;
}

/* etc. */
body {
  padding: 2rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.