Ionic 7修改ion-input聚焦高亮边框颜色的问题及解决

在Ionic 7里，ion-input默认聚焦时的高亮边框是蓝色，但绑定[(ngModel)]后，高亮会变成绿色。尝试--color、--border-color、--highlight-color-focused等CSS属性都无法修改这个绿色高亮，最终通过设置--highlight-color-valid变量可以将高亮改为橙色。

原因说明 #

当ion-input与ngModel绑定后，组件会默认进入"验证通过"状态，此时聚焦时的高亮颜色会使用--highlight-color-valid变量，而非常规的--highlight-color-focused，所以需要覆盖这个变量的值。

代码示例 #

HTML 模板

<!-- 单个输入框设置 -->
<ion-input 
  [(ngModel)]="inputValue"
  placeholder="请输入内容"
  style="--highlight-color-valid: #ff9800;"
></ion-input>

全局样式设置（可选）

如果需要所有ion-input都应用该样式，可在全局SCSS/CSS文件中添加：

ion-input {
  --highlight-color-valid: #ff9800; /* 橙色值，可根据需求调整 */
}

TypeScript 组件代码

import { Component } from '@angular/core';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.scss']
})
export class DemoComponent {
  inputValue: string = '';
}

内容的提问来源于stack exchange，提问作者kasimaru13