Cannot change color of text code input Cognito Hosted UI

In Amazon Cognito's Managed Login Branding, there are limitations to how much you can customize specific elements like the text code input fields and messages during MFA verification.

The Managed Login UI provides customization options primarily focused on visual elements such as:

• Logo images and placement
• Background images and colors
• Primary branding colors
• Text alignment
• Component-specific styling

However, the ability to target specific elements like div-login-msg or text-code with custom CSS is limited. The CSS selectors in the Managed Login UI are auto-generated and subject to change, making them unreliable for consistent styling.

For the specific issue of black text on black background during the MFA code entry screen, you would need to use the branding editor to modify the overall text color scheme rather than targeting those specific elements directly. The branding editor is a no-code visual editor that allows you to modify the look and feel of the login pages, but it doesn't support adding custom attributes or selectors to HTML elements.

If you require more granular control over these specific elements, you might need to consider implementing a custom authentication UI instead of using the Managed Login UI, which would give you complete control over the HTML structure and CSS selectors.
Sources
Add CSS selectors to Cognito Managed Login Branding | AWS re:Post
Hosted UI and overall user experience | AWS re:Post