javascript - jQuery UI selectmenu 不接受百分比宽度

Question

如果我为选择分配一个百分比宽度(例如:100%)，jQuery UI 计算以像素为单位的等效宽度并将其分配给选择菜单小部件。但是，这会在调整屏幕大小时引起问题。有办法修复这个错误吗？

JSFiddle

HTML:

<form action="#">

  <fieldset>
    <label for="speed">Select a speed</label>
    <select name="speed" id="speed">
      <option>Slower</option>
      <option>Slow</option>
      <option selected="selected">Medium</option>
      <option>Fast</option>
      <option>Faster</option>
    </select>
  </fieldset>

</form>

</div>

CSS:

body{font-family:arial}

fieldset {
  border: 0;
}
label {
  display: block;
  margin-bottom: 10px;
}
select {
  width: 100%;
}

Javascript:

  $(function() {
    $( "#speed" ).selectmenu();
  });

Answer 1

检查元素以验证分配的 jquery UI iD。它通常是用于选择菜单的 #[element]-button。

然后将 CSS 应用于该 ID。在这种情况下

#speed-button {
      width: 100% !important;
    }

似乎解决了这个问题: Updated Fiddle

您还可以针对创建的通用 jquery UI 类。我只是发现，如果您只处理 1 或 2 个元素，那么弄清楚 ID 何时会执行相同的操作非常耗时。