CODEWITHSUNDEEP
androidcsscordova
Justin D.
Justin D.

Reputation: 4976

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

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

Upvotes: 3

Views: 7927

Answers (4)

caiocpricci2
caiocpricci2

Reputation: 7788

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.

Upvotes: 1

Jonathan Naguin
Jonathan Naguin

Reputation: 14766

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

Upvotes: 5

DarkLeafyGreen
DarkLeafyGreen

Reputation: 70406

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.

Upvotes: 3

Angelin
Angelin

Reputation: 648

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

Upvotes: 0

Related Questions