似乎无法重新创建此过滤器下拉菜单

Question

我现在已经尝试重新创建这个线框几个小时，但我不能让它看起来一样并且正常工作。

我已尝试使用select标记，但这并不允许我在没有jQuery之类的情况下设置选项的样式。我只是想让它变得尽可能简单，它确实不需要以任何方式浮华。

有谁知道如何重新创建此过滤器菜单？最好没有Java，但如果不可能，那就是它。

Answer 1

以下是如何实现这一目标的基本思路：

<强> HTML：

<div class="dropdown">
  <div class="dropdown-header">
    <a href="#">Amount</a>
  </div>
  <div class="dropdown-body">
    <div>
      <a href="#">Option 1</a>
    </div>
    <div>
      <a href="#">Option 2</a>
    </div>
    <div>
      <a href="#">Option 3</a>
    </div>
  </div>
</div>

JS：（我在这里使用jQuery，但你可以用纯js做同样的事情）

$(function() {
  $(".dropdown-header a").click(function(ev) {
    ev.preventDefault();
    $(this).parent().next().toggle();
  });
});

CSS：（修改以获得所需的视图。您可能还需要使用js动态编辑某些属性）

.dropdown {
  display: inline-block;
}
.dropdown,
.dropdown-header {
  border: 1px solid black;
  border-radius: 5px;
}
.dropdown-header,
.dropdown-body div {
  padding: 5px;
}

Answer 2

你可以选择样式。但你不能用这些选项做到这一点。

＆＃13;

＆＃13;

.select {
border-radius: 15px;
outline:0;
}

＆＃13;

<select class="select">
<option>Option 1</option>
<option class="option2">Option 2</option>
</select>

＆＃13;

＆＃13;

＆＃13;