Android 下拉（选择）CSS

Posted 2023-03-11

【中文标题】Android 下拉（选择）CSS

【英文标题】：Android Dropdown (Select) CSS

【发布时间】：2010-11-20 07:09:42

【问题描述】：

我目前正在为移动浏览器编写一些样式表，并且在 android 浏览器中遇到了一个奇怪的问题。当更改文本框的 font-size CSS 属性时，框会变大以容纳更大的文本。但是，在选择框上执行此操作不会更改选择框的大小，但文本仍然会变大（实际上与呈现的表单元素的顶部和底部重叠）。

谁能告诉我是否可以增加 Android 浏览器中选择框的高度。或者，如果没有指向可以应用到它们的 CSS 属性列表的方向。

谢谢。

【问题讨论】：

您确定没有在其他地方应用高度、继承自另一个输入或表单、元素吗？

是的，我很确定，我已经查看了 firefox 中的 firebugs 检查器中的元素以确保。

【参考方案1】：

这似乎是一个浏览器错误。当您将浏览器的文本大小设置为“巨大”（在设置中）时，您也可以重现它。我添加了new issue 并建议使用自定义背景图像的解决方法：

<select style="background: url('big-select-bg.png')"/>

【讨论】：

感谢 Josef，很高兴其他人可以重现该错误，而不仅仅是我。希望能找到一个简单的解决方案。

更多关于安卓选择行为的背景信息可以在这里找到：***.com/questions/14744437/…

【参考方案2】：

将选择控件的不透明度设置为0

然后在选择控件后面放置一个看起来像文本框的跨度控件，以便选择控件直接位于跨度顶部。

用户不会看到选择控件，但是当用户尝试在 span 中输入文本时，会出现选择控件的下拉选项。

用户做出选择后，使用 javascript 将 span 的 innerhtml 更新为选择控件的值。

确保跨度和选择控件的尺寸对齐良好。 （不要使用实际的 texbox 控件）

mealaroni.com

【参考方案3】：

您可以使用的另一个选项（在运行 android 版本 2.1-update1 的 Galaxy S 上测试）：

select 
    -webkit-appearance: listbox;

select, input 
    width: 100%;
    height: 40px;
    line-height:40px;
    border: 1px solid #999;
    border-radius: 6px;
    margin-bottom:10px;

这样输入和选择看起来都一样，单击选择将照常打开选项菜单。

【讨论】：

-webkit-appearance 属性为我修复了它。谢谢！

不适合我...menulist-text 似乎是最强大的宽度、高度和位置行为。

【参考方案4】：

试试这个：

select

    -webkit-appearance: menulist-text;

【讨论】：

这实际上解决了所有 webkit 设备中选择输入的高度和宽度的许多问题。有人建议menulist-button 但这似乎始终有效。谢谢！

【参考方案5】：

对我来说“-webkit-appearance: listbox;”问题没有完全解决。

我必须另外添加一个填充属性：

select 
    -webkit-appearance: listbox;
    width: 100%;
    height: 35px;
    line-height: 35px;
    border: 1px solid #bbb;
    border-radius: 4px;
    padding: 0 0 1px 8px;