在firebase-ui上更改inputfield的边框颜色

Question

我正在使用Firebase authUI。这是demo：单击Sign in with Email

我尝试更改在输入字段中单击时出现的“蓝色”下划线的颜色。但是我只是不知道需要更改css中的哪个元素。我几乎尝试了所有操作，但这里缺少任何内容。也许有人对我有个主意？

我只发现了如何在未单击边框时更改其颜色：

.firebaseui-textfield.mdl-textfield .firebaseui-input {
    border-color: rgb(209,74,74);
}

Answer 1

如果您将类.is-focused手动添加到包含输入和标签的div中。

这将强制聚焦状态，您可以检查并相应地修改源。

我自己看了一下，如果您想更改边框颜色，请添加它...

.firebaseui-textfield.mdl-textfield .firebaseui-label::after {
    background-color: magenta;
}

根据需要更改颜色。您可能需要使用Important覆盖它。

Answer 2

对于Ionic用户，请将其放置在 variables.scss 文件的末尾。

别忘了!important关键字。

更改按钮，文本边框，进度栏和链接颜色的示例：

.progressbar {
    background-color: var(--ion-color-primary) !important;
}

.mdl-button--raised.mdl-button--colored {
    background-color: var(--ion-color-primary) !important;
}

.mdl-button.mdl-js-button.mdl-button--primary {
    color: var(--ion-color-primary) !important;}

.firebaseui-textfield.mdl-textfield.firebaseui-label::after {
    background-color: var(--ion-color-primary) !important;
}

a.firebaseui-link {
    color: var(--ion-color-primary) !important;
}

结果：