'Change border-color of inputfield on firebase-ui

I am using firebase authUI. Here is a demo: Click on Sign in with Email

I try to change the color of the 'blue' underline that is appearing when clicking in the input field. But I just can't figure out which element in the css I would need to change. I tried almost everything but I am missing something here. Maybe someone has an idea for me?

I only found out how to change the color of this border when it is not clicked:

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


Solution 1:[1]

If you add the class .is-focused manually to the div which contains the input and label.

That will force the focus state which you can inspect and modify the source accordingly.

I had a look myself, and if you want to change the border color, then add this...

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

Change the color as you wish. You might need to use important to override it.

enter image description here

Solution 2:[2]

For Ionic users, place it at the end of your variables.scss file.

Don't forget the !important keyword.

Example to change buttons, text border, progress-bar and links color:

.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;
}

Result:

enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 joshmoto
Solution 2

Related Questions