更改焦点上的离子输入边框颜色

Posted 2023-03-16

【中文标题】更改焦点上的离子输入边框颜色

【英文标题】：Changing ion-input border color on focus

【发布时间】：2021-10-05 13:50:18

【问题描述】：

我使用了一些 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="[e-mail]"></ion-input>  
</div>

这就是字段的样子

我尝试使用下面的 CSS，但它不起作用

.input-field:focus 
    border: solid 2px black;

更新

我可以使用 Typescript 通过处理 (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="[e-mail]"></ion-input>  
  </div>

打字稿

focusEmail()
    document.getElementById('email-input').style.border = "solid 2px #107CF1";
  

 unFocusEmail()
    document.getElementById('email-input').style.border = "solid 1px rgba(218,218,218,1)";
  

【问题讨论】：

你可以从他们的官方网站上关注离子输入的文档。

@AbdulMoeedChohan 文档在哪里？

【参考方案1】：

简单的方法是 CSS：

.has-focus 
  border: 2px solid #5b9bd1 !important;