使用 CSS 重新设置选择下拉菜单的样式

Question

我的网站上有一个选择下拉菜单，并希望使用 CSS 重新设置它的样式，因此选项是单个点而不是下拉菜单。这是可以使用纯CSS的东西吗？

任何帮助将不胜感激，谢谢。

CSS

.radio-toolbar input[type="radio"] {
  display: none;
}

.radio-toolbar label {
  display: inline-block;
  background-color: #ddd;
  padding: 4px 11px;
  font-family: Arial;
  font-size: 16px;
  cursor: pointer;
}

.radio-toolbar input[type="radio"]:checked+label {
  background-color: #bbb;
}

HTML/Liquid

<label class="product-tag pb-2 mt-4" for="SingleOptionSelector-{{ forloop.index0 }}">
 {{ option.name }}
</label>                   

<select class="radio-toolbar single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
{% endfor %}
</select>

Current

Aim

Answer 1

select 元素无法使用纯 CSS 呈现为按钮。

如果您能够更改标记，那么使用input[type="radio"] 元素可能会很有意义。单选按钮可以使用纯 CSS 设置样式 - CSS - How to Style a Selected Radio Buttons Label?

---

或者（如果必须保留select 元素）您的目标可以使用javaScript 来实现。隐藏下拉菜单，为每个选项显示一个按钮，并将单击处理程序绑定到将相应的 option 设置为 selected 的按钮，并为隐藏的 select 触发 change 事件。