javascript - 如何使用 SelectBoxIt.js 创建 100% 宽度选择

Question

我在使用 SelectBoxIt.js 创建 100% 宽度的选择框时遇到了一些问题

即使将 CSS 宽度设置为 100%，选择框也不会填充 100% 的容器元素。

CSS：

.test1, .test2, .test2 .selectboxit, .test2 .selectboxit-options {
  width: 100%;
}

HTML：

<select name="test2" class="test2">
  <option value="SelectBoxIt is:">SelectBoxIt is:</option>
  <option value="a jQuery Plugin">a jQuery Plugin</option>
  <option value="a Select Box Replacement">a Select Box Replacement</option>
  <option value="a Stateful UI Widget">a Stateful UI Widget</option>
</select>

Answer 1

js

$(".mySelect").selectBoxIt({ autoWidth: false });

然后是CSS

.selectboxit-container {
    width: 100%;
}

    .selectboxit-container .selectboxit {
    width: 100%;
}

Answer 2

Greg Franko 帮我解决了这个问题。

您可以在 JSBin 中看到解决方案。 http://jsbin.com/udapic/1/edit

基本上，您需要像这样禁用 autoWidth：

$(".test2").selectBoxIt({ autoWidth: false, copyClasses: "container" });

然后在 CSS 中将宽度设置为 100%：

.test1, .test2, .test2 .selectboxit, .test2 .selectboxit-options { width: 100%; }