如何修复多个选择的高度和宽度

Question

当我继续在select元素中选择多个选项时，显示当前选择的区域会不断扩展，如下图所示：

我想要的是我希望在选择多个选项时修复select元素。就像下面的例子一样：

我看到了这个question，但我不知道他是怎么做到的。

$(".chosen-select").chosen({
  no_results_text: "Oops, nothing found!"
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script>
<link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet"/>


<select data-placeholder="Choose Username" multiple class="chosen-select" name="selectLDAP" id="selectLDAP" onchange='a()'>
    <option value=""></option>
    <option value='option1'>option1</option>
    <option value='option2'>option2</option>
    <option value='option3'>option3</option>
    <option value='option4'>option4</option>
    <option value='option5'>option5</option>
</select>

Answer 1

在CSS中，您可以为选择组件本身添加高度，但是您还必须定义“overflow-y：auto”以获取滚动条（而不仅仅是溢出元素）。

这里真正的问题是找出要设计风格的元素。 jQuery不会在您编写时留下您的选择 - 它会呈现不同的东西：

<div class="chosen-container chosen-container-multi" title="" id="selectLDAP_chosen" style="width: 70px;">
  <ul class="chosen-choices">
    <li class="search-choice"><span>option1</span><a class="search-choice-close" data-option-array-index="1"></a></li><li class="search-field">
      <input class="chosen-search-input" autocomplete="off" value="Choose Username" style="width: 25px;" type="text">
    </li>
  </ul>
  <div class="chosen-drop">
    <!-- ... -->
  </div>
</div>

您可以通过运行问题中的代码段然后使用浏览器的开发工具找到答案。

同样，在开发工具中，您可以尝试找出实际呈现列表的组件，并使用CSS属性来使其表现得像您想要的那样。

您会发现呈现要设置样式的列表，因此以下CSS应该有效：

.chosen-choices {
    height: 80px;
    overflow-y: auto;
}

应该这样做。在编写实际的CSS文件之前，您可以使用浏览器的开发人员工具来处理这些值。