Shopify Question posted in
The Shopify help center can be found here.

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

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

Tags:

2

Answers


  1. 0

    Sounds like <select multiple> might be closer to what you’re looking for. Learn more here: https://www.w3schools.com/tags/att_select_multiple.asp

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search