android - 将 "select"组合框设置为固定大小

Question

我的 JQuery 移动网页的一部分(在 Android 应用程序中使用)如下所示:

<table style="width:100%">
//here are some other rows with other input fields
<tr>
  <td>Combobox:</td>
  <td>
    <select id="sl_bnd">
      <option value="0">Very very very long text</option>
      <option value="1">Shorty</option>
    </select>
  </td>
</tr>

问题是，当选择“非常非常非常长的文本”时，组合框会变宽，显示出屏幕外的一半表格。

我想要的是将组合框设置为固定的初始大小(这是动态的，因为屏幕可能有不同的分辨率)。

有人知道怎么做吗？

Answer 1

工作示例:http://jsfiddle.net/Gajotres/HZAnz/

只需使用简单的 CSS:

.ui-select, #sl_bnd, #sl_bnd option {
    width: 200px !important;
}

你甚至可以使用百分比:

.ui-select, #sl_bnd, #sl_bnd option {
    width: 80% !important;
}

或者如果你想改变特定的选择:

#custom-select .ui-select, , #sl_bnd, #sl_bnd option {
    width: 200px !important;    
}

主要是使用 !important 来覆盖默认值。

如果您只想更改选项宽度，只需使用此 css:

#sl_bnd, #sl_bnd option {
    width: 200px !important;    
}