Search code examples
user-interfaceazure-ad-b2c-custom-policydisplayname-attribute

B2C: is there a way to avoid displaying Email Address twice?

enter image description here

As per screenshot I am trying to remove 'Email Address' the first time that it appears, not the one within the text box, the placeholder. I have tried to remove DisplayName, or using localization, but everytime both are removed and not only one. Is this something achievable?

Solution

  • Yes, you can customize the Sign-In page elements using JavaScript/CSS. B2C injects the html inside the predefined div with id set to api (<div id="api>) as described here. You will need to check the structure of the html elements in the developer tools and then select the element using JavaScript to manipulate the DOM.

    To hide the email field you can use CSS:

    .attrEntry label[for="email"]
{
    display:none;
}

    If you wanted to hide all of the label fields you could use this:

    .attrEntry label {
  display: none;
}

    Another option is to use jQuery and select the elements like in this example where the user selects the Email Address label and removes it, and also replaces the "Sign in with your email address" text:

     $("label[for='email']").remove(); 

 $("#localAccountForm .intro h2").text("your custom text");

    Additional guides and examples:

    Customize the user interface with HTML templates in Azure Active Directory B2C

    Access B2C sign in elements

    How to remove and/or modify the elements that are loaded into custom sign in pages in Azure AD B2C?