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

android, cordova, css

Solution

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.

Problem

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 style : However, when I open the app packaged with PhoneGap, I get this : For the exact same code. How can I style the select menu on the Android device so it appears like in Chrome? I tried using --webkit-appearance, but I'm not sure how to use it exactly...

Original source