WebView/Phonegap change select (dropdown) style

Question

In my AndroidManifest.xml file I set up the theme to be Holo.Light (or even Holo)

The alert dialog are being designed according to the Holo Theme (either light or dark) but the dropdowns (select) are looking like this:

Is there a way to style the dropdowns like Google Chrome and other apps do?
The native select looks like this:

Answer 1

There is no easy way to achieve that. What you need to do there is to build a native plugin that will open a custom dialog when you click on a <select>.

That dropdown you want to get rid of is the default view for selects on webviews, opposed to the second one that was built in chrome. To help getting you started:

//get all the options and store in an array

var values = $.map($('#group_select option'), function(e) { return e.value; });

//Native function that gets the options and display a dialog

function void showDialog(String[] values){
    AlertDialog.Builder b = new Builder(this);
    b.setTitle("Example");
    b.setItems(values, new OnClickListener() {

    @Override
    public void onClick(DialogInterface dialog, int which) {

        dialog.dismiss();
        switch(which){
        case 0:
            //call some javascript method to use this value here
            break;
        case 1:
            //call some javascript method to use this value here
            break;
        }
    }

});
b.show();
}

Make sure to set your theme to Holo or Holo.Light as you prefer, and do your preferred bit to call a native code from the javascript layer whenever there is a click on a select element.

Answer 2

You can use jQuery mobile and get yourself a customized theme from from their themeroller

or

Try using "android:Theme" as your parent theme as

<style name="YourTheme" parent="android:Theme">

it is the old android theme and gives the style you are looking for

or you can also specifically change

<item name="spinnerStyle">@android:style/Widget.Spinner</item>
<item name="spinnerDropDownItemStyle">@android:style/Widget.DropDownItem.Spinner</item>
<item name="spinnerItemStyle">@android:style/Widget.TextView.SpinnerItem</item

to create your own style