我使用了一些 CSS 来设置 ion-input
字段的样式,但我希望该字段的边框在聚焦时发生变化
CSS
.input-field {
background: rgba(250,250,250,1);
border: solid 1px rgba(218,218,218,1);
margin-bottom: 16px;
height: 50px;
border-radius: 20px;
padding-left: 16px;
}
HTML
<div class="input">
<ion-label class="prompt-text" position="stacked">Email</ion-label>
<br><br>
<ion-input class="input-field" placeholder="email@example.com"></ion-input>
</div>
这是这个领域的样子
我尝试使用下面的 CSS,但没有用
.input-field:focus {
border: solid 2px black;
}
更新
我可以通过处理事件 (ionFocus)
和 (ionBlur)
<div class="input">
<ion-label position="stacked">Email</ion-label>
<br><br>
<ion-input autocomplete="off" [(ngModel)]="email" id="email-input" (ionFocus)="focusEmail()" (ionBlur)="unFocusEmail()" class="input-field" placeholder="email@example.com"></ion-input>
</div>
typescript
focusEmail(){
document.getElementById('email-input').style.border = "solid 2px #107CF1";
}
unFocusEmail(){
document.getElementById('email-input').style.border = "solid 1px rgba(218,218,218,1)";
}
最佳答案
简单的方法是 CSS:
.has-focus {
border: 2px solid #5b9bd1 !important;
}
关于css - 改变焦点上的 ionic 输入边框颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68583806/