This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
Download Microsoft Edge
More info about Internet Explorer and Microsoft Edge
Configuring your company branding for the user sign-in process provides a seamless experience in your applications that use Azure Active Directory (Azure AD) as the identity and access management service. Use this CSS reference guide if you're using the
CSS template
as part of the
customize company branding
process.
HTML selectors
The following CSS styles become the default body and link styles for the whole page. Applying styles for other links or text override CSS selectors.
body
- Styles for the whole page
Styles for links:
a, a:link
- All links
a:hover
- When the mouse is over the link
a:focus
- When the link has focus
a:focus:hover
- When the link has focus
and
the mouse is over the link
a:active
- When the link is being clicked
Azure AD CSS selectors
Use the following CSS selectors to configure the details of the sign-in experience.
.ext-background-image
- Container that includes the background image in the default lightbox template
.ext-header
- Header at the top of the container
.ext-header-logo
- Header logo at the top of the container
.ext-middle
- Style for the full-screen background that aligns the sign-in box vertically to the middle and horizontally to the center
.ext-vertical-split-main-section
- Style for the container of the partial-screen background in the vertical split template that contains both a sign-in box and a background (This style is also known as the Active Directory Federation Services (ADFS) template.)
.ext-vertical-split-background-image-container
- Sign-in box background in the vertical split/ADFS template
.ext-sign-in-box
- Sign-in box container
.ext-title
- Title text
.ext-subtitle
- Subtitle text
Styles for primary buttons:
.ext-button.ext-primary
- Primary button default style
.ext-button.ext-primary:hover
- When the mouse is over the button
.ext-button.ext-primary:focus
- When the button has focus
.ext-button.ext-primary:focus:hover
- When the button has focus
and
the mouse is over the button
.ext-button.ext-primary:active
- When the button is being clicked
Styles for secondary buttons:
.ext-button.ext-secondary
- Secondary buttons
.ext-button.ext-secondary:hover
- When the mouse is over the button
.ext-button.ext-secondary:focus
When the button has focus
.ext-button.ext-secondary:focus:hover
- When the button has focus
and
the mouse is over the button
.ext-button.ext-secondary:active
- When the button is being clicked
.ext-error
- Error text
Styles for text boxes:
.ext-input.ext-text-box
- Text boxes
.ext-input.ext-text-box.ext-has-error
- When there's a validation error associated with the text box
.ext-input.ext-text-box:hover
- When the mouse is over the text box
.ext-input.ext-text-box:focus
- When the text box has focus
.ext-input.ext-text-box:focus:hover
- When the text box has focus
and
the mouse is over the text box
.ext-boilerplate-text
- Custom message text at the bottom of the sign-in box
.ext-promoted-fed-cred-box
- Sign-in options text box
Styles for the footer:
.ext-footer
- Footer area at the bottom of the page
.ext-footer-links
- Links area in the footer at the bottom of the page
.ext-footer-item
- Link items (such as "Terms of use" or "Privacy & cookies") in the footer at the bottom of the page
.ext-debug-item
- Debug details ellipsis in the footer at the bottom of the page
