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

<select name="sorts" id="sort-select">
  <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 */
::select-fallback-button {
  background: gold;
  font-family: fantasy;
  font-size: 1.2rem;
}

/* 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.