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

Posted 2023-05-07

【中文标题】流体布局中选择元素的样式问题

【英文标题】：Problems styling select elements in a fluid layout

【发布时间】：2014-06-27 10:29:37

【问题描述】：

问题：

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

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

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

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

试过了还是不行，原因：

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

我需要什么：

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

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

【参考方案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 。 . .

【讨论】：

不，恐怕我需要插件来使元素看起来像我必须遵循的给定设计文档，然后我必须使样式化的元素与流畅的布局相得益彰。我没有包含代码，因为问题来自我提到的特定插件。

【参考方案2】：

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