Ionic中如何修改ion-select选中单选框的颜色

嘿，我懂你的困扰！你已经成功改了取消和确认按钮的颜色，但选中选项的勾选框还一直是默认蓝色，对吧？这确实是Ionic组件里一个容易卡壳的小问题，下面给你几个实用的解决方案：

方案一：用CSS变量直接覆盖（最推荐） #

Ionic的组件样式大多可以通过内置的CSS变量来调整，对于你这种多选的ion-select，只要在全局样式文件（比如global.scss）或者当前组件的scss文件里加这段代码就行：

/* 替换#你的自定义颜色为你想要的颜色，比如你用到的verde对应的绿色 #2ecc71 */
ion-select-option:checked {
  --color-selected: #你的自定义颜色;
  /* 要是想顺便改选中后的背景色，可以加下面这行 */
  --background-selected: #f0f8f4;
}

要是你以后用到单选的ion-select，对应的变量是--color-checked，记下来备用就行~

方案二：用深度选择器强制覆盖（兼容旧版本） #

如果你的Ionic版本比较旧，CSS变量不生效的话，就用Angular的深度选择器:host::ng-deep来强制修改默认样式：

:host::ng-deep ion-select-option.ion-checked .ion-select-option-checkbox {
  color: #你的自定义颜色;
  /* 还可以修改勾选框的边框颜色 */
  border-color: #你的自定义颜色;
}

:host::ng-deep ion-select-option.ion-checked .ion-select-option-checkbox::after {
  /* 这个是勾选框内部对勾的背景色 */
  background-color: #你的自定义颜色;
}

这里要提一句：虽然:host::ng-deep在Angular里有废弃提示，但在Ionic项目里依然是常用的样式覆盖方式，放心用就行。

小补充：别混淆color属性的作用 #

你给第一个ion-select-option加了color="verde"，这个属性只是修改选项文本的颜色，不是选中后的勾选框颜色哦！要是想统一所有选项的文本颜色，也可以用CSS变量：

ion-select-option {
  --color: #你要的文本颜色;
}

修改完样式后，记得刷新一下页面（开发模式下热重载会自动生效），就能看到自定义的勾选框颜色啦！

内容的提问来源于stack exchange，提问作者Ivanilson Antônio