样式设计选择流体布局中的元素

Question

问题：

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

总之，我有以下先决条件：

• style <select> elements
• style <select multiple> elements
• 没有像素宽度（应该支持基于百分比的宽度）
• 理想情况下基于jQuery

我确实尝试了一些现有的插件，我现在将其命名，包括它们不能为我工作的原因。

试过但没有用，为什么：

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

我需要什么：

我要么需要一个适用于所有情况的解决方案，要么是一个适用于非多选的解决方案，与选择的/ 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并根据需要进行修改。它远非理想选择，但我已经花了太多时间处理这个小问题。