HTML <select> multiple 具有单选的外观和感觉答案

【问题标题】：HTML <select> multiple with look and feel of single selectHTML <select> multiple 具有单选的外观和感觉
【发布时间】：2018-01-08 11:58:22
【问题描述】：

所以，我有一个奇怪的要求，我有一个启用了 multiple 选择的 <select> 元素。

<select multiple>
...
</select>

但由于multiple 属性，我用滚动条显示了option 的列表，这不是必需的。我们想让它看起来像没有multiple 属性。我尝试了以下方法，但不确定这是否正确：

这是一个fiddle，它看起来不太好。

$("select").on("focus", function() {
  $("select").css({
    height: "100px",
    "overflow-y": "scroll"
  });
});

$("select").on("blur", function() {
  $("select").css({
    height: "18px",
    "overflow-y": "hidden"
  });
});

select.drop-down-view {
  height: 18px;
  min-width: 54px;
  border: none;
  background: none;
  overflow-y: hidden;
}

select.drop-down-view:before {
  content: "Select";
}

select.drop-down-view:after {
  content: "\25BC";
  position: absolute;
  top: 10px;
  left: 50px;
  color: #c1c1c1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple class="drop-down-view">
  <option>123</option>
  <option>456</option>
  <option>789</option>
</select>

有人可以为此提出一些更好的方法吗？谢谢。

【问题讨论】：

所以你想在选择下拉菜单中选择多个答案？
是的，但我只能尝试改变它的外观，而不是功能
如果在答案前面插入复选框会怎样？
复选框不在选项中
在下拉列表中，您可以使用复选框来一次选择多个答案。像这样i.stack.imgur.com/Dbeh2.png

标签： html css drop-down-menu html-select

【解决方案1】：

我认为这很难以一种好的方式实现。当元素模糊时，“正常”<select> 元素会显示所选值。当可以有多个选定值时，在这种情况下应该如何工作？

话虽如此，我认为您实际上正在做某事并尝试摆弄一下您的小提琴。

我在select元素周围添加了一个与select高度相同的包装器，然后在展开时将select设置为position: absolute;。这可以防止选择下方的内容被下推。我通过在选择下方添加一些显示所选值的文本来演示这一点。

When the select is blurred, it is scrolled to the top, where the default "Select" label is (at least in Chrome).不是很好，但我认为它看起来比在选择模糊时将标签落在两个实际值之间更好。

在https://jsfiddle.net/ncevcw5p/3/查看分叉小提琴

【讨论】：