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.
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.
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.