CODEWITHSUNDEEP
cssangularjsionic-framework
noor
noor

Reputation: 681

Ionic Change Default Drop Down Design

I have the following code: 

<label class="item item-input item-select">
  Country
<select ng-options="country.name for country in countries" ng-model="country" ng-change="update(country)" >
<option value="" style="display:none" disabled selected>{{countryPlaceholder}}</option>
</select>
</label>

But on the phone, when the drop down is selected. It appears like this:

enter image description here

How do I change the colors to be white and blue instead of grey and white?

Upvotes: 0

Views: 609

Answers (1)

OClyde
OClyde

Reputation: 1076

What is displayed there is the native interpretation of a select on the particular device (in this case an Android device). The browser has a predefined layout shown for html select elements.

If you want to customize it though, you cannot use a select element. I'd suggest to implement a directive replicating the behaviour of a standard select element.

I prepared an example right here: http://play.ionic.io/app/ca66596ef774

Surely this has to be adjusted (as you want to pass in different options and stuff), but it's mainly meant to transport the idea. It makes use of a custom directive displayed similar to a select (which you can customize to match your app's style) and for displaying the options, the $ionicPopup service is used.

For the popup you can then define a layout (I've done it the quick way in JS, you can also define it in your HTML and pass a templateUrl to the Popup) and you can adjust all the elements as you please.

If you have any questions don't hesitate to ask.

Upvotes: 1

Related Questions