Android下拉菜单(select)CSS

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

任何人都可以告诉我,如果有可能在Android浏览器中增加select框的高度。 或者,如果没有指向可应用于它们的CSS属性列表的方向。

谢谢。

Solutions Collecting From Web of "Android下拉菜单(select)CSS"

这似乎是一个浏览器的错误。 当您将浏览器的文本大小设置为“巨大”(在设置中)时,您也可以重现它。 我添加了一个新的问题 ,现在提出一个自定义背景图片的解决方法:

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

另一个选项,你可以使用(testing银河S运行Android版本2.1更新1):

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

这样的input和select都看起来相同,点击select将像往常一样打开选项菜单。

试试这个:

 select{ -webkit-appearance: menulist-text; } 

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

然后放置一个跨度控制,看起来像select控件背后的文本框,以便select控件直接位于跨度顶部。

用户将看不到select控件,但是当用户尝试向跨度中input文本时,将出现select控件的下拉选项。

用户做出select后,使用javascript来更新span的innerHTML和select控件的值。

确保量程和select控制线的尺寸合适。 (不要使用实际的texbox控件)

mealaroni.com

对我来说“-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; }