html - 我如何摆脱选择标签的下拉效果

Question

我正在尝试使用 css 来设置选择/选项 html 元素的样式，以便它们显示为一个小按钮列表，并突出显示所选选项，而不是传统的下拉菜单。

我会简单地重写整个东西，但我正在编辑一个 shopify 主题，并且这种变化有太多的影响，其中一些比我的“工资等级”更高，所以我正在尝试使用简单的方法，而不仅仅是使用 css 重新设计它以获得所需的结果

Answer 1

我以前也这样做过，但是在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>