css - ionic 更改默认下拉设计

Question

我有以下代码:

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

但在手机上，当下拉菜单被选中时。看起来像这样:

如何将颜色更改为白色和蓝色而不是灰色和白色？

Answer 1

那里显示的是特定设备(在本例中为 Android 设备)上选择的 native 解释。浏览器具有为 html 选择元素显示的预定义布局。

如果你想自定义它，你不能使用选择元素。我建议实现复制标准选择元素行为的指令。

我在这里准备了一个例子:http://play.ionic.io/app/ca66596ef774

当然这必须进行调整(因为你想传递不同的选项和东西)，但它主要是为了传达这个想法。它使用类似于选择的自定义指令(您可以自定义它以匹配您的应用程序的样式)，并使用 $ionicPopup 服务来显示选项。

然后你可以为弹出窗口定义一个布局(我已经在 J​​S 中快速完成了，你也可以在你的 HTML 中定义它并将一个 templateUrl 传递给弹出窗口)并且你可以根据需要调整所有元素.

如果您有任何问题，请随时提出。