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 style :

enter image description here

However, when I open the app packaged with PhoneGap, I get this :

enter image description here

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

You can try using CSS frameworks(https://code.google.com/p/iui/) in which case you will get consistence look and feel, you then need not worry about style portability. — art-fan-vikram, Aug 11 '13 at 10:35

score 5 · Answer 1 · answered Aug 11 '13 at 10:27

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

score 3 · Accepted Answer · answered Aug 11 '13 at 09:58

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.

score 1 · Answer 3 · edited May 23 '17 at 11:52

1

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.

edited May 23 '17 at 11:52

Community

1
1

answered Aug 12 '13 at 09:56

caiocpricci2

7,714
10
56
88

Angelin · Answer 4 · 2013-08-10T19:04:51.627

0

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;
}

edited Aug 10 '13 at 19:04

answered Aug 10 '13 at 08:13

Angelin

648
2
7
19

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

4 Answers4

You can't but more important you should not!

Linked