내용으로 건너뛰기

Cannot change color of text code input Cognito Hosted UI

0

Cannot change style of text code span when user is using MFA image

I am unable to modifiy styling for div-login-msg nor for text-code Currently rendering as black on black :(

<div class="div-login-msg">
    <span id="text-code">Enter the code that was sent by email to j***@g***.</span>
</div>

질문됨 일 년 전120회 조회

1개 답변
-1

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

답변함 일 년 전

  • As a user of the hosted UI, i would expect the colors of a field such as this to be customizable with styling.

로그인하지 않았습니다. 로그인해야 답변을 게시할 수 있습니다.

좋은 답변은 질문에 명확하게 답하고 건설적인 피드백을 제공하며 질문자의 전문적인 성장을 장려합니다.