时间戳

首页 > 解决方案 > 使用 CSS 重新设置选择下拉菜单的样式

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

问题描述

我的网站上有一个选择下拉菜单，并想使用 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

目标

标签： javascripthtmlcssliquid

解决方案

select元素不能用纯 CSS 呈现为按钮。

如果您能够更改标记，那么使用input[type="radio"]元素可能会有意义。单选按钮可以使用纯 CSS 设置样式 - CSS - 如何设置选定单选按钮标签的样式？

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

推荐阅读