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

Question

我使用了一些 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;
}