skip to Main Content

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

2

Answers


  1. 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. 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