如何使用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%; }