样式选择下拉列表具有独特的布局

Question

我想做这样的选择输入，我已经设计了UI 我试图在谷歌搜索，如何将其构建为代码，许多人似乎使用UL和LI的dropdown css。

有没有办法用select标签构建这个设计，或者如果我必须使用dropdown li如何将列表构建为像select这样的函数。

Answer 1

您可以按如下方式模拟选择下拉列表。

我假设您使用表格。该代码包含一个隐藏的输入元素，它将获取所选的值。

JComboBox

$("body").on("click", ".selected", function() {
  $(this).next(".options").toggleClass("open");
});

$("body").on("click", ".option", function() {
  var value = $(this).find("span").html();
  $(".selected").html(value);
  $("#sel").val(value);
  $(".options").toggleClass("open");
});

.container {
  display: flex;
  flex-wrap: wrap;
  width: 25%;
}

.selected {
  border: thin solid darkgray;
  border-radius: 5px;
  background: lightgray;
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 1.5em;
  margin-bottom: .2em;
  padding-left: .5em;
  min-width: 150px;
  position: relative;
}

.selected:after {
  font-family: FontAwesome;
  content: "\f0d7";
  margin-left: 1em;
  position: absolute;
  right: .5em;
}

.options {
  display: none;
  margin: 0;
  padding: 0;
}

.options.open {
  display: inline-block;
}

li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
}

li>img {
  margin-right: 1em;
}