PhoneGap & Android - How to use the new select list style

Question

I developed an mobile app for Android using PhoneGap. I also published it for browsers.

On my phone, when I view the app in Chrome, I get the following select menu s

Answer 1

You can't but more important you should not!

Each mobile platform has its own design principles which are designed to keep best user's interest in mind. For iOS it could even mean that your app will be rejected.

Even different android builds tend to have different ui principles like in your pictures where the first one shows the select menu from original android and the last shows the select menu from samsungs android.

So you can't style the select menu using css. However you could write a phonegap plugin to give you a custom select menu.

Another option would be to build a select menu without html's select but just javascript. But I would not suggest that.

Answer 2

I had a similar issue with my dialogs in my Phonegap app in Android. The default theme in a cordova android app is:

android:theme="@android:style/Theme.Black.NoTitleBar"

Take a look to your AndroidManifest.xml, in your MAIN activity. If this is the case change it to

android:theme="@android:style/Theme.Holo.Light.NoActionBar"

Chrome seems to use this theme according your screenshot (or a similar).

Answer 3

Each browser displays elements in its specific way. You should use -webkit-appearence to try to reset the select to its default appearence:

select {
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
}

Answer 4

There is no way to style that using css only. That is not a html component, it's not part of the DOM. Both the selectors you see are added on top of your browser by native methods.

Essentially, if you want to change the default behavior of the select you must build your own select dialog and trigger it when the user clicks on a select.

Check this similar question.