流体布局中选择元素的样式问题

Question

问题：

我有一个中等到高度复杂的门户搜索页面。它使用基于百分比的流体网格在容器中包含至少 8 个选择元素。至少一个选择应该支持多个选择。

总的来说，我有这些先决条件：

• 样式<select>元素
• 样式<select multiple>元素
• 无像素宽度（应支持基于百分比的宽度）
• 理想情况下基于 jQuery

我确实尝试了一些现有的插件，我现在将命名这些插件，包括它们不适合我的原因。

试过了还是不行，原因：

• jQuery.customSelect()
  • 不能很好地调整大小：需要在窗口调整大小时触发render 事件（性能糟糕）
  • 不支持多选
• chosen 和 select2
  • 无法停用顶部的搜索框
    • 不适合某些正常的选择输入
  • 可能是多选的一个选项
• bootstrap-select
  • 过于专注于 twitter 引导程序：无法很好地使用自定义网格

我需要什么：

我要么需要一个适用于所有情况的解决方案，要么需要一个适用于非多选的解决方案，以便与 selected/select2 一起使用。

编辑：我需要使用给定的设计，因此我需要一个插件。

Answer 1

没有代码，它宁可猜测而不是知道，但你可以试试这个：

select {
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -web-kit-box-sizing: border-box;
    width: 100%;
    padding: 10px; /* Or what ever you need, and with box-sizing its fitting nicely */
}

你甚至不需要 jquery/addons 。 . .

Answer 2

最后我决定使用select2 并根据需要进行修改。这远不是一个理想的选择，但我已经在这个小问题上花费了太多时间。