具有单选外观和感觉的 HTML <select> 多个

Question

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

<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>

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

Answer 1

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

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

我在 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/ 的 fork fiddle