通过单击按钮更改 Ionic 应用程序中的输入边框颜色

Question

I'm trying to figure out, how to change input border color in Ionic TypeScript application with button click, if I have input class="mess" in html:

<form>
  <ion-item>
    <ion-input class="mess"></ion-input>
  </ion-item>
</form>

with default color in .css :

.mess {
  border: 2px solid #88ff00;
}

I can't find the way, how to change border color from #88ff00; to different color #95214b; with click:

 <ion-button (click)="changeBorderColor()">Change color</ion-button>

I've tried use document.documentElement.style.setProperty in changeBorderColor() function, but looks like I've to use some different way for result.

Answer 1

Try this:

<ion-button (click)="changeBorderColor()">Change color</ion-button>

<script>

function changeBorderColor(){
 
   document.getElementById(."mess").style.borderColor = "#95214b";

}

Next to your class="mess" add an id="mess" and in the script where it says getElementById="#mess" or you can use getElementByClassName=".mess" either should work fine.

Answer 2

You can try this way...

page.html file

  <form>
    <ion-item>
      <ion-input  [ngClass]="setBorderColor? 'mess'  : ''"></ion-input>
    </ion-item>
    <ion-button (click)="changeBorderColor()">Change color</ion-button>
  </form>

page.ts file

 public setBorderColor: boolean = false;

  constructor() { }

  ngOnInit() {
  }

  changeBorderColor() {
    this.setBorderColor = true;
  }

page.scss file

.mess {
  border: 2px solid #88ff00;
}