Android 下拉（选择）CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1288740/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Android Dropdown (Select) CSS
提问by ROGUE
I'm currently writing some stylesheets for mobile browsers and have come across a strange issue in the Android browser. When changing the font-size CSS attribute of a text box the box gets bigger to accomodate the larger text. Doing this on a select box however does not change the size of the select box, but the text still gets larger (actually overlapping the top and bottom of the rendered form element).
我目前正在为移动浏览器编写一些样式表，但在 Android 浏览器中遇到了一个奇怪的问题。当更改文本框的 font-size CSS 属性时，框会变大以容纳较大的文本。然而，在选择框上执行此操作不会更改选择框的大小，但文本仍然变大（实际上重叠呈现的表单元素的顶部和底部）。
Can anyone tell me if it's possible to increase the height of select boxes in the Android browser. Or if not point me in the direction of a list of CSS attributes that can be applied to them.
谁能告诉我是否可以增加 Android 浏览器中选择框的高度。或者，如果没有指出可以应用于它们的 CSS 属性列表的方向。
Thanks.
谢谢。
采纳答案by Josef Pfleger
This seems to be a browser bug. You can also reproduce it when you set your browser's text size to 'huge' (in settings). I added a new issueand suggest a workaround with a custom background image for now:
这似乎是一个浏览器错误。当您将浏览器的文本大小设置为“巨大”（在设置中）时，您也可以重现它。我添加了一个新问题，并建议暂时使用自定义背景图像的解决方法：
<select style="background: url('big-select-bg.png')"/>
回答by Dror
Another option you can use (tested on galaxy S running android version 2.1-update1):
您可以使用的另一个选项（在运行 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;
}
This way the inputs and selects all look the same, clicking the select will open the options menu as usual.
这样输入和选择看起来都一样，点击选择将像往常一样打开选项菜单。
回答by ali mokrani
try this one:
试试这个：
select{
-webkit-appearance: menulist-text;
}
回答by Bjhamltn
Set the opacity of the select control to 0
将选择控件的不透明度设置为 0
Then place a span contorl styled to look like a textbox behind the select control so that the select control are sits directly on top of the span.
然后在选择控件后面放置一个样式看起来像文本框的 span 控件，以便选择控件直接位于 span 的顶部。
The user won't see the select control but when the user attemps to enter text into the span the dropdown options for the select control will appear.
用户不会看到选择控件，但是当用户尝试在跨度中输入文本时，将出现选择控件的下拉选项。
After the user makes their selection use javascript to update the innerHTML of the span with the value of the select control.
在用户做出选择后，使用 javascript 用选择控件的值更新 span 的 innerHTML。
Make sure the dimensions of the span and the select control line up well. (Do not use an actual texbox control)
确保跨度和选择控件的尺寸对齐。（不要使用实际的 texbox 控件）
mealaroni.com
美食网
回答by Marcus
For me "-webkit-appearance: listbox;" solved the issue not completely.
对我来说“-webkit-appearance：列表框；” 没有完全解决问题。
I had to add a padding attribute additionally:
我不得不另外添加一个填充属性：
select {
-webkit-appearance: listbox;
width: 100%;
height: 35px;
line-height: 35px;
border: 1px solid #bbb;
border-radius: 4px;
padding: 0 0 1px 8px;
}
