Android Dropdown (Select) CSS

Question

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).

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.

Thanks.

Answer 1

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 issue and suggest a workaround with a custom background image for now:

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

Answer 2

Set the opacity of the select control to 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.

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.

Make sure the dimensions of the span and the select control line up well. (Do not use an actual texbox control)

mealaroni.com

Answer 3

I add the background image for the select element. Fixed it success. THX！

Answer 4

Another option you can use (tested on galaxy S running android version 2.1-update1):

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.