Feature: Allow Ability to change Authenticator Input field background color on Branding Dashboard
Description:
There seems to be no way to change the background color of the input field used for the authenticator selector or readonly input fields through the Branding Dashboard.
This field is used in invitation links to make sure the email is readonly, as well as to authenticate devices. This poses a problem in controlling the UX since it limits what colors we can work with.
I did find a work around using the Auth0 CLI by updating the universal login template and adding this CSS snippet
div:has(> .ulp-authenticator-selector-text) {
background-color: #23242a;
}
However, the Auth0 documentation explicitly recommends not updating and overriding css classes in the Widget since it could interfere with the user experience if updates are pushed by Auth0 that changes the class name. On top of that, the has() selector is brand new and many browsers haven’t been updated to support it.
Use-case: The auth0 branding dashboard provides the ability to change all input field background colors except this one field, which limits the color options a UX designer can work with. It seems simple enough to allow this input field background color to also be changeable through the branding dashboard.