将自定义样式添加到ion-select

Question

我有一个带有几个选项的ion-select，我使用[selectOptions]添加了一个标题，是否有一种方法定义CSS，以便我可以设置标题的背景颜色，按钮对齐方式，并向标题添加图标。

 <ion-select [selectOptions]="daysOptions" #selectDays="ngModel" required name="selectedDay" [(ngModel)]="selectDay" >
         <ion-option *ngFor="let day of Days;" [value]="day.val">{{day.name}}</ion-option>
 </ion-select>

有人能帮助我吗？

- Yokesh Varadhan

---

你的意思是提醒本身吗？[selectOptions]有一个名为cssClass的选项，可以让你将类传递给警报。如果你想制作自己的定制组件，这并不难，这里有一个选择但没有确定/取消按钮的示例：https://github.com/misha130/ionic2-select-nobuttons/blob/master/src/pages/select/selectalertless.ts - misha130

Answer 1

现在您可以轻松解决这个问题

将以下代码添加到ion-select元素中：

[interfaceOptions]="{cssClass: 'my-class'}"

添加到CSS中：

.my-class .alert-wrapper {
    max-width: 94% !important;
}

- hoi ja

---

<ion-select [interfaceOptions]="{cssClass: 'my-custom-alert-class'}" ..... 请确保将自定义 CSS 放入全局文件中。 .my-custom-alert-class .alert-wrapper { - tanrobles

Answer 2

是的，您可以在选项中使用cssClass，如下所示：

// In your component
daysOptions = {
    cssClass: 'my-class',
    ...,
}

然后在CSS中，您可以按照自己的意愿进行操作，例如：

.my-class .alert-wrapper {
    max-width: 94% !important;
}

感谢ionic文档：https://ionicframework.com/docs/api/components/alert/AlertController/#advanced。这个页面包含了关于AlertController的高级使用方法的详细说明。

- Jean-Claude YALAP

---

这行不通，我的意思是传递cssClass选项对于弹出框接口无效。 - Olu Adeyemo

Answer 3

我几个月前需要一个颜色选择器，但是我找不到任何东西。唯一的方法是使用自定义CSS。我尝试为ion-select和ion-option添加CSS类，但这些类不会在生成的输出中反映出来。因此，将自定义CSS应用于ion-select和ion-options的唯一方法是使用父元素和一些JS。

您可以在以下链接中查看逻辑： HTML： https://github.com/ketanyekale/ionic-color-and-image-selector/blob/master/src/pages/home/home.html

TS: https://github.com/ketanyekale/ionic-color-and-image-selector/blob/master/src/pages/home/home.ts

SCSS: https://github.com/ketanyekale/ionic-color-and-image-selector/blob/master/src/pages/home/home.scss

- Ketan Yekale