How do i get rid of the dropdown effect of the select tag

Question

I'm trying to use css to style a select/option html element so that they display as a small list of button with the selected option being highlighted instead of the traditional dropdown menu.

I would've simply rewritten the entire thing, but i am editing a shopify theme, and there are too many implications of such change, some of them are above my "pay-grade" let's say, so i am trying to use the easy way out of just restyling it using css to get the desired result

Answer 1

I have done this before like this, but it doesn't work on mobile devices such as iOS.

#foo {
  overflow: auto;
  height: 2.4em;
  border: 0;
}

#foo option {
  display: inline-block;
  margin: 0 .3em;
}

#foo option:checked {
  font-weight: bold;
}

<select multiple="multiple" name="foo[]" id="foo" size="5">
  <option value="1" selected="selected">Foo 1</option>
  <option value="2">Foo 2</option>
  <option value="3">Foo 3</option>
  <option value="4">Foo 4</option>
  <option value="5">Foo 5</option>
  <option value="6">Foo 6</option>
  <option value="7" selected="selected">Foo 7</option>
</select>