1

在使用 Chrome 的 Android 平板电脑上，我正在显示一个自定义网页。在其中我有一些下拉控件（HTML5 SELECT）。使用这些控件，我试图通过减小它们的显示大小来显示更多的 HTML OPTION 元素。我的努力没有成功。在我的 7 英寸平板电脑上，选项总是显示只有大约 12 个元素填充显示屏（以纵向模式保持）。

例如，使用这个 CSS：

#distDV {
    font-size: 8pt;
    border-color: #999999;
}

#distDV option {
    font-size: 8pt;
    border-color: #999999;
}

使用此 HTML：

<select id="distDV">
      <option value="30">+30</option>
      <option value="29">+29</option>
</select>

在台式计算机上（使用 Chrome v. 25 或更高版本），选择下拉菜单以请求的较小字体显示。当我单击控件以显示值时，选项也采用小字体。

在我的 android 平板电脑（使用 Chrome v. 25 或更高版本）上，选择下拉菜单以较小的请求字体显示。当我单击控件以选择一个值时，android 设备会在标准选项选择中显示选项，全屏，在我的 7 英寸显示屏上从上到下使用大约 12 行。我正在尝试通过 CSS 将其设为 16 行。

我正在寻找想法。是的，我已经尝试过使用 optgroup，但没有效果。

提前感谢，杰罗姆。

4

1 回答 1

1

正如您发现的那样，无法更改选项选择对话框的字体大小。这是出于非常好的可用性原因。您是否有理由需要同时显示更多选项？为什么对话框的滚动不足以满足您的需求？另请记住，如果您将选项设置得太小，您可能会让您的用户感到沮丧。您可能能够准确地选择一个选项，但其他人可能不会。

所有这一切都表明您可以通过编写自己的对话框来绕过这些限制，也许可以使用单选按钮。例如：

<input type="radio" id="distDV30" name="distDV" value="30"><label for="distDV30">+30</label>
<input type="radio" id="distDV29" name="distDV" value="29"><label for="distDV29">+29</label>

然后，您可以随心所欲地设计样式。另一种选择是使用输入框，如果您的所有选项都是数字，这可能更合适。例如。：

<input type="number" name="distDV" min="1" max="30">
于 2013-09-05T12:56:20.980 回答